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在 这 个 浏览 器 时 代 你 不 学 点 儿 网 页 构建 知 

识 还 真是 有 些 跟 不 上 时 代步 伐 了 。 这 本 书 全 面 覆 

盖 HTML5、CSS3 和 JavaScript, 圳 括 了 构建 网 页 

所 需 的 基本 知识 以 及 一 些 中 高 级 内 容 , 新 手 选 这 

本 书 绝对 不 会 错 , 中 级 开发 人 员 将 它 作为 参考 书 
也 相当 方便 ! 

一 一 亚马逊 读者 


这 本 书 对 于 学 习 HTML5 来 说 真是 不 可 多 得 

的 好 书 , 作者 既 熟知 技术 趋势 , MRBS ER 

巧 , 看 看 书 中 那些 代码 示例 、 实 现 效果 图 、 简 明 

参考 表 , 无 一 不 正中 读者 下 怀 , 难怪 许多 Web 开 
发 人 员 都 极力 推荐 这 本 书 ! 

一 一 goodreads 读 者 


Adam Freeman 


曾 在 多 家 名 企 担任 高 级 职务 , 现 为 畅销 技术 图 书 
(ER, 著 有 多 部 C#、.NET 和 Java 方 面 的 大 部 头 作 
品 。 其 中 《ASP.NET 4 高 级 程序 设计 (第 4 版 ) 》、 
《精通 ASP.NET MVC 3 框架 ( 第 三 版 ) 》 销 量 
均 在 同 品种 中 名 列 前 茅 , 备 受 读者 推崇 。 
《HTML5 权 威 指南 》 是 Freeman 专 门 为 网 页 开发 
新 手 和 网 页 设计 师 打 造 的 经 典 参 考 书 , 这 本 书 和 对 
承 作 者 的 一 贯 风格 , 幽默 风趣 、 简 约 凝 练 、 逻 辑 
性 强 , 是 广大 Web 开 发 人 员 的 必 读 经 典 。 
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内 容 提 要 


《HIMLS 权威 指南 》 是 系统 学 习 网 页 设计 的 权威 参考 图 书 。 本 书 分 为 五 部 分 : 第 一 部 分 介绍 学 习 本 书 
的 预备 知识 和 HTML、CSS 和 JavaScript 的 最 新 进展 ; 第 二 部 分 讨论 HTML 元素 ， 并 详细 说 明了 HTMLS 
中 新 增 和 修改 的 元 素 ; 第 三 部 分 阐述 CSS， 涵 盖 了 所 有 控制 内 容 样 式 的 CSS 选择 器 和 属性 ， 并 辅 以 大 量 代 
码 示例 和 图 示 ; 第 四 部 分 介绍 DOM， 剂 析 如 何 用 JavaScript 操纵 HTML 内 容 ; 第 五 部 分 讲解 Ajax、 多 媒体 
和 canvas 元 素 等 HTMLS 高 级 特性 。 

本 书面 向 初学 者 和 中 等 水 平 Wb 开发 人 员 ， 是 牢固 掌握 HTML5、CSS3 和 JavaScript 的 必 读 之 作 。 
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开始 探索 HTML5 之 前 ， 需 要 一 番 准 备 。 下 面 五 章 将 要 介绍 本 书 的 结构 ， 说 明 如 何 着 手 
HTML5 开发 ， 并 且 简 要 介绍 HTML, CSS 和 JavaScript 的 新 进展 。 








HTML5# RAR 








HTML ( Hypertext Markup Language， 超 文本 标记 语言 ) 诞生 于 20 世 纪 90 年 代 初 。 我 与 它 的 
初次 邂逅 大 约 是 在 1993 年 或 1994 年 ， 当 时 我 还 在 伦敦 附近 一 个 大 学 的 研究 实验 室 工作 。 那 时 浏览 
器 只 有 NCSA Mosaic 这 一 种 ，Web 服 务 器 的 种 类 也 届 指 可 数 。 

回想 那 段 日 子 我 们 对 HTML 和 万 维 网 的 着 迷 ， 仍 不 免 有 些 惊 证 。 那 时 我 们 还 得 不 厌 其 烦 地 把 
“World Wide Web" ( 万 维 网 ) 这 三 个 单词 全 写 出 来 ， 因 为 它 的 知名 度 还 没有 那么 高 ， 远 没有 今天 
这 么 受 人 瞩目 ， 还 不 能 只 简称 其 为 “Web ”。 

那 时 一 切 都 还 很 简陋 。 我 还 记得 当时 有 盯 着 一 些 慢 腾腾 加 载 的 宝石 图 片 看 的 情景 。 这 都 是 宽带 
革命 之 前 的 事 ， 整 个 大 学 享有 的 带宽 大 致 与 如 今 的 一 部 移动 电话 相当 。 不 过 我 们 还 是 很 激动 。 为 
迎接 新 时 代 的 到 来 , 大 家 都 在 忙 着 修改 课题 经 费 申请 。 尽 管 我 们 上 网 能 做 的 只 是 看 看 另 一 所 大 学 
的 咖啡 壶 图 片 〈 这 所 大 学 也 在 伦敦 附近 ， 但 过 去 喝 杯 咖啡 却 并 不 近 )， 我 们 还 是 有 一 种 强烈 的 感 
Ah: 技术 世界 已 经 分 为 Web 诞 生前 和 诞生 后 两 个 时 代 了 。 

光阴 在 背 ， 在 许多 用 户 眼中 ，Web 跟 因特网 变 成 了 一 回 事 儿 ， 而 我 们 也 远 远 超越 了 为 几 张 宝 
石 图 片 就 雀跃 不 已 的 层次 。 在 此 过 程 中 ,HTML 有 过 扩充 ， 有 过 增强 ， 有 过 扭曲 ， 有 过 前 歼 ， 见 
过 争斗 ， 见 过 官司 ， 受 过 忽视 ,受过 追捧 ， 曾 被 贬 为 雕 虫 小 技 ， 也 曾 被 誉 为 未 来 之 星 。 待 尘埃 落 
定 ， 它 已 然 成 为 亿 万 人 日 常生 活 不 可 或 缺 的 一 部 分 。 

本 书 讲述 的 是 HTML5。 这 是 HTML 标 准 的 最 新 版 本 , 意 在 为 这 项 重要 技术 带 来 秩序 、 条 理 和 
改进 。 曾 经 的 青 涩 少年 终于 成 熟 了 。 


1.1 HTML 的 历史 


HTML 的 书 都 有 “HTML 的 历史 ”这 样 一 节 ， 其 中 大 都 会 提供 HTML 标 准 从 诞生 至 今 的 详 
细 年 表 。 需 要 这 类 信息 的 读者 可 以 去 查 查 维基 百科 , 不 过 这 些 信 息 读 起 来 可 能 比较 枯燥 乏味 ,用 
处 也 不 大 。 本 书 只 关心 其 中 几 个 重要 转折 点 和 一 个 长 期 存在 的 发 展 态势 ， 旨 在 让 读者 明白 HTML 
是 如 何 成 型 的 ， 明 白 为 什么 最 终 走 到 了 HTML5。 
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1.1.1. JavaScript 出 场 


JavaScriptiB A ( 虽然 取 了 这 么 一 个 名 字 ， 但 是 它 跟 Java 程 序 设计 语言 基本 上 没有 什么 关系 ) 
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出 自 一 家 名 为 网 景 的 公司 。 它 的 出 现 标志 着 内 舱 在 Web 浏 览 器 中 的 客户 端 脚本 程序 控制 功能 的 发 
端 。 原 本 是 一 种 静态 内 容 载体 的 HTML 因 此 变 得 有 点 丰富 起 来 。 之 所 以 说 “有 点 丰富 "， 是 因为 
现在 我 们 在 浏览 器 中 见 到 的 这 种 复杂 交互 方式 是 经 过 一 段 时 间 的 发 展 之 后 才 形 成 的 。 

JavaScript 并 非 HTML 规 范 核心 的 组 成 部 分 ,然而 Web 浏 览 器 、HTML 和 JavaScript 之 间 的 关系 
是 如 此 紧密 ， 以 至 于 根本 无 法 将 它们 分 开 讨论 。HTML5 规 范 假定 可 以 使 用 JavaScript， 而 且 要 想 
使 用 HTML5 中 新 增 的 一 些 最 为 引 人 注 目的 特性 也 需要 用 到 JavaScript。 


1.1.2 浏览 器 战争 的 结 


浏览 器 市 场 也 有 过 激烈 的 竞争 。 主 要 的 角逐 者 是 微软 和 网 景 ， 它们 都 把 在 自己 的 浏览 器 中 添 
加 一 些 独 有 的 特性 当做 竞争 手段 。 其 如 意 算盘 是 这 样 打 的 : 诱 人 的 专 有 特性 会 诱 使 开发 人 员 制 作 
出 只 能 在 特定 浏览 器 上 使 用 的 内 容 , 而 诱 人 的 内 容 又 会 诱 使 用 户 对 能 提供 这 种 内 容 的 浏览 器 青睐 
有 加 ， 由 此 市 场 霸业 可 成 。 

可 惜 人 算 不 如 天 算 。 这 样 做 的 结果 是 Web 开 发 人 员 要 么 只 使 用 那些 所 有 浏览 器 都 有 的 特性 ， 
要 么 煞费苦心 地 想 些 变通 办 法 来 使 用 各 款 浏 览 器 中 勉强 相当 的 那些 特性 。 这 不 窗 为 一 种 区 效 ,而 
且 其 后 遗 症 直到 现在 仍然 在 影响 Web 开 发 。 

微软 用 免费 提供 IE 来 与 网 景 收 费 的 Navigator 抢 生意 , 这 一 招 儿 后 来 被 认定 违反 垄断 法 。 很 多 
人 指责 微软 是 网 景 震 台 的 罪魁 祸首 。 这 一 指控 或 许 不 无 道理 , 不 过 在 我 这 个 曾 在 那 段 时 期 为 网 景 
做 过 大 约 18 个 月 顾问 的 人 看 来 ,我 从 没 见 过 像 它 那样 一 根 筋 地 自残 的 公司 。 有 些 公司 注定 要 成 为 
别人 的 前 车 之 鉴 ， 网 景 就 是 其 中 之 一 。 

浏览 器 战争 以 网 景 倒 台 及 微软 受到 惩处 结束 ， 为 基于 标准 的 网 络 浏览 商定 了 基础 。HTML 规 
范 有 了 改进 ,遵从 这 个 规范 成 了 准则 。 现 在 的 浏览 需 需 要 赁 遵守 标准 的 程度 来 竞争 。 这 是 一 次 天 
翻 地 覆 的 转折 ， 开 发 人 员 和 用 户 均 受 益 于 此 。 


1.1.3 ”插件 称雄 


插件 是 Web 世 界 的 “ 益 虫 ”。 它 们 可 以 提供 一 些 单 用 HIML 很 难 实现 的 高 级 特性 和 丰富 内 容 。 
有 些 插件 特性 如 此 丰富 、 部 署 如 此 普遍 ， 以 至 于 不 少 网 站 只 提供 用 于 这 种 插件 的 内 容 。Adobe 公 
司 的 Flash 正 是 这 样 一 个 典型 。 我 经 常见 到 完全 用 Flash 实 现 的 网 站 。 按 说 这 也 没什么 不 妥 ， 不 过 
这 就 意味 着 浏览 需 和 HTML 除 了 Flash 容 器 一 职 外 再 无 他 用 。 
浏览 器 开发 商 看 插件 不 顺眼 ， 因 为 它 把 控制 权 转 移 到 了 插件 开发 商 手 中 。HTML5 的 一 大 改 
进 就 是 着 力 于 让 浏览 器 直接 处 理 那 些 原来 要 使 用 Flash 的 富 内 容 (rich content )。 苹 果 和 微软 是 疏 
远 Flash 的 两 个 急 先 锋 。 前 者 的 iDOS 不 支持 Flash， 后 者 则 在 Windows 8 附带 的 Metro 风 格 的 正中 禁用 
了 Flash。 














































































































































































































1.1.4 语义 HTML 浮 出 水 面 
HTML 标准 的 早期 版 本 不 太 关心 将 内 容 的 意义 与 其 呈现 方式 分 开 。 想 表示 一 段 文字 的 重要 
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生 ， 使 用 一 个 让 文字 显示 为 粗 体 的 HTML 元 素 就 是 了 。 把 粗 体内 容 与 重要 内 容 关 联 起 来 是 用 户 的 
和。 这 对 人 类 用 户 来 说 很 容易 ， 却 会 让 自动 化 工具 犯难 。 自 HTML 初 次 亮相 以 来 ,对 内 容 进行 自 
动 处 理 日 趋 重 要 ， 人 们 也 越 来 越 致 力 于 分 开 HTML 元素 的 意义 与 内 容 在 浏览 器 中 的 呈现 方式 。 


115 发展 态势 : HTML 标准 滞后 于 其 使 用 


制定 标准 一 般 都 是 一 个 长 期 过 程 ， 像 HTML 这 种 应 用 广泛 的 技术 更 是 如 此 。 参 与 方 众多 ,每 
家 都 想 把 新 标准 往 符合 自己 利益 或 观点 的 方向 引 。 而 标准 并 不 是 法 律 , 标准 制定 机 构 害怕 分 裂 其 
于 一 切 。 因 此 对 于 未 来 的 特性 和 改进 该 当 如 何 ， 各 方 经 常 陷入 旷日持久 的 讨价还价 。 

负责 制定 HTML 标 准 的 是 W3C (World Wide Web Consortium， 万 维 网 联盟 ), ix STR 
的 任务 。 一 条 提案 要 花 不 少时 间 才 能 成 为 标准 。 而 对 HTML 核 心 规范 的 修改 则 需 经 过 很 长 时 间 才 
会 得 到 批准 。 

宛 长 的 标准 制定 过 程 带 来 的 结果 就 是 W3C 总 是 要 多 绕 一 些 路 ,总 是 在 将 已 经 被 大 家 接受 的 实 
际 做 法 追认 为 标准 。HTML 规 范 反映 的 只 是 几 年 前 关于 Web 内 容 的 前 沿 思 考 。 这 削弱 了 HTML 标 
准 的 重要 性 ， 因 为 真正 的 革新 并 非 来 自 W3C， 而 是 来 自 浏 览 嚣 和 插件 。 
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1.2 HTML5 简介 


HTML5 不 仅仅 是 HTML 规 范 的 最 新 版 本 , 它 还 是 一 系列 用 来 制作 现代 富 Web 内 容 的 相关 技术 
的 总 称 。 后 面 各 章 将 会 介绍 这 些 技术 ,其 中 最 重要 的 三 项 技术 是 HTML5 核 心 规 范 、CSS( Cascading 
Style Sheets， 层 车 样 式 表 ) 和 JavaScript。 

HTML5S 核 心 规范 定义 用 以 标记 内 容 的 元 素 , 并 明确 其 含义 。 CSS 可 用 于 控制 标记 过 的 内 容 呈 
现在 用 户 面前 的 外 貌 。JavaScript 则 可 以 用 来 操纵 HTML 文 档 的 内 容 以 及 响应 用 户 的 操作 ,此 外 要 
想 使 用 HTML5 新 增 元 素 的 一 些 为 编程 目的 设计 的 特性 也 需要 用 到 JavaScript。 





















































CSS 和 JavaScript。 


有 些 人 (那些 挑剔 、 执 抛 、 爱 钻 牛 角 尖 的 人 ) 会 说 HTML5 所 指 的 只 是 HTML 元 素 。 别管 他 们 。 
这 些 人 看 不 出 Web 内 容 的 本 质 所 发 生 的 根本 性 变化 。 用 于 网 页 的 各 种 技术 之 间 的 关联 已 经 变 得 如 
此 紧密 ， 以 致 于 需要 通晓 这 些 技术 才能 制作 Web 内 容 。 如 果 只 使 用 HTML 元 素 ， 不 用 CSS， 这 样 
制作 出 来 的 内 容 会 让 用 户 觉 得 不 便 阅 读 。 如 果 用 了 HTML 和 CSS， 但 不 用 JavaScript， 那 就 无 法 为 
用 户 的 操作 提供 即时 反馈 ， 也 无 法 使 用 HTML5 中 的 一 些 高 级 特性 。 
































1.2.1 ”新 标准 
为 了 应 对 漫长 的 标准 化 过 程 以 及 标准 落后 于 常见 用 法 的 情况 ，HTM5 及 其 相关 技术 是 作为 一 
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系列 小 型 标准 而 制定 的 。 其 中 有 些 标准 只 有 区 区 几 页 , 涉及 的 只 是 某 项 特性 中 一 个 高 度 细 化 的 方 
面 。 当 然 ， 其 他 一 些 标准 仍然 有 密密麻麻 的 几 百 页 ， 涵 盖 了 相关 功能 的 所 有 方面 。 

这 样 做 的 目的 是 让 较 小 的 团体 可 以 合作 设计 和 将 对 他 们 较为 重要 的 特性 标准 化 , 争议 较 少 的 
特性 可 以 先 标准 化 ,不必 受 围绕 其 他 特性 发 生 的 争论 的 拖累 。 

这 个 办 法 有 利 也 有 星 。 好 处 是 可 以 加 快 标准 制定 步伐 。 主 要 的 上 素 端 在 于 难以 全 面 掌握 制定 中 
的 各 个 标准 的 情况 以 及 这 些 标准 之 间 的 关系 。 技术 规范 的 质量 也 有 所 下 降 。 有些 标准 中 存在 着 一 
些 歧义 ， 致 使 浏览 絮 中 的 实现 出 现 了 不 一 致 的 情况 。 

最 大 的 不 足 之 处 大 概要 算 没有 一 条 可 用 来 评估 HTML5 达 标 情况 的 基准 线 。 我 们 现在 还 处 于 
初始 阶段 ， 但 是 不 能 指望 用 户 可 能 用 到 的 所 有 浏览 器 都 实现 了 要 用 的 特性 。 因 此 采用 HIML5 中 
的 特性 是 件 复杂 的 事情 ,需要 仔细 评估 相关 标准 得 到 支持 的 情况 。 W3C 公 布 过 一 个 正式 的 HTML5 
徽标 ( 如 图 1-1 所 示 )， 但 是 它 并 不 代表 对 HTML5 标 准 及 相关 技术 的 全 面 支 持 。 


HTML 























图 1-1 W3C 的 正式 HTML5 徽 标 


1.2.2 引入 原生 多 媒体 支持 


HTML5 的 一 大 改进 就 是 支持 在 浏览 絮 中 直接 播放 视频 和 音频 文件 ( 也 就 是 说 不 借助 于 插 
fF), 这 是 W3C 对 插件 风靡 现象 的 一 种 反应 。 原 生 (native) 多 媒体 支持 再 结合 其 他 HTML 特 性 可 
望 大 有 作为 。 这 些 特性 将 在 第 34 章 介绍 。 














1.2.3 引入 可 编程 内 容 

HTML5 最 大 的 变化 之 一 是 添加 了 canvas 元 素 ( 第 34 章 和 第 35 章 会 有 介绍 )。 这 个 元 素 是 对 插 
件 现 象 的 另 一 反应 ， 它 提供 了 一 个 通用 的 绘图 平面 ， 开 发 人 员 可 以 用 它 完 成 一 些 通常 用 Adobe 
Flash 来 完成 的 任务 o 
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这 个 特性 之 所 以 重要 , 部 分 原因 在 于 要 使 用 canvas 元 素 就 必须 用 到 JavaScript。 编程 从 而 成 了 
HTML 文 档 中 第 一 层次 的 事情 ， 这 是 一 个 重大 转变 。 




















1.2.4 引入 语义 Web 


HIML5 引 入 了 一 些 用 来 分 开元 素 的 含义 和 内 容 呈 现 方式 的 特性 和 规则 。 这 是 HTML5 中 的 一 
个 重要 概念 ， 详 见 第 6 章 。 这 个 主题 在 本 书 中 将 多 次 论 及 ， 它 标志 着 HTML 在 走向 成 熟 的 道路 上 
又 迈 上 了 一 个 新 台阶 ,反映 出 制作 和 使 用 HTML 内 容 的 方式 的 多 样 性 。 这 个 变化 〈 它 逐步 体现 在 
之 前 的 HTML 版 本 中 ) 稍稍 增加 了 Web 开 发 者 的 负担 ， 这 是 因为 开发 者 需要 先 标 记 内 容 然后 再 定 
义 其 呈现 方式 。 不 过 有 些 实用 的 新 改进 可 以 减轻 这 种 负担 。 











1.3 HTML5 现 况 


HTMLS 的 核心 标准 目前 仍 在 制定 过 程 中 ， 一 时 完成 不 了 。 这 意味 着 本 书 介绍 的 特性 与 最 终 
标准 中 的 可 能 略 有 出 入 。 不 过 , 标准 正式 出 炉 还 得 等 上 好 些 年 ， 而 最 终 版 本 与 目前 版 本 可 能 出 人 
不 大 。 


1.3.1 浏览 器 对 HTML5 的 支持 情况 


最 流行 的 那些 浏览 器 都 已 经 实现 了 许多 HTML 特 性 。 本 书 演示 示例 的 显示 效果 时 ， 用 来 浏览 
HTML5 文 档 的 是 谷歌 的 Chrome 或 Mozilla 的 Firefox。 然 而 ， 不 是 每 款 浏览 器 都 支持 所 有 的 特性 。 
在 把 某 个 特性 用 到 实际 项 目 之 前 , 应 该 先 核查 一 下 浏览 器 是 否 支 持 这 个 特性 。 有 些 浏 览 器 (例如 
Chrome 和 Firefox ) 的 升级 近乎 持续 不 断 。 撰写 本 书 时 我 已 经 记 不 清 所 使 用 的 浏览 器 到 底 更 新 过 多 
DRT o 鉴于 每 次 升级 都 会 加 入 些 新 特性 或 修补 点 毕 漏 , 这 意味 着 我 无 法 就 某 种 特性 得 到 哪些 浏 
览 右 的 支持 提供 确切 的 信息 ,不 过 考虑 到 HTML 标 准 的 分 散 本 性 , 使 用 Modernizr 之 类 的 JavaScript 
库 检 查 特 性 是 可 行 的。 使 用 Modernizr， 可 以 用 编程 的 方式 判断 用 户 使 用 的 浏览 器 是 否 支持 关键 
的 HTML 特 性 ， 籍 此 可 以 决定 在 文档 中 应 该 使 用 哪些 特性 。 

习惯 未 雨 绸 缪 的 读者 可 以 参考 一 下 When Can1Use? 网 站 。 上 面 提供 了 浏览 器 的 支持 情况 和 采 
用 率 方面 的 详细 信息 ， 并 且 勤 于 修订 。 

















































































































1.3.2 ”网 站 对 HTML5 的 支持 情况 


用 到 HTML5 特 性 的 网 站 日 益 增 多 。 其 中 有 些 属于 示范 性 网 站 , 是 用 来 演示 HTML 特 性 的 。 但 
是 能 利用 浏览 需 对 HTML5 的 支持 的 实用 型 网 站 也 越 来 越 多 。YouTube 就 是 一 个 典型 ， 它 现在 已 经 
提供 让 浏览 器 直接 播放 的 视频 一 一 当然 ， 它 还 为 较 老 的 浏览 器 提供 Flash 视 频 。 


1.4 本 书 结构 
本 书 分 为 五 部 分 。 本 章 所 属 的 第 一 部 分 除了 介绍 使 用 本 书 所 需要 的 预备 知识 外 ， 还 会 介绍 
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HTML, 、CSS 和 JavaScript 最 新 进展 的 基本 情况 。 对 于 近期 未 做 过 Web 开 发 工作 的 读者 ， 这 些 内 容 
可 以 助 其 跟 上 形势 。 

第 二 部 分 讨论 的 是 HTML 元 素 , 包括 那些 HTML5 中 新 增 或 有 所 改动 的 元 素 。 每 个 元 素 都 有 说 
明和 演示 。 读 者 还 可 以 了 解 到 元 素 默认 的 呈现 方式 。 

第 三 部 分 讨论 的 是 CSS (Cascading Style Sheet, EUER. Hope HT Rot 
容 样式 的 所 有 CSS 选 择 器 和 属性 ， 还 提供 了 大 量 例子 和 图 示 来 帮助 读者 掌握 其 用 法 。 这 部 分 讨论 
的 是 CSS 的 最 新 版 本 ( CSS3 )， 不 过 也 会 说 明 一 下 哪些 特性 是 CSS1 和 CSS2 中 引入 的 。 

第 四 部 分 介绍 的 是 DOM (Document Object Model， 文 档 对 象 模型 )。 通 过 DOM ， 即 可 用 
JavaScript 探 索 和 操纵 HTML 内 容 。DOM 包 含 着 对 于 制作 富 Web 内 容 至 关 重 要 的 一 套 特性 。 

第 五 部 分 讲 的 是 Ajax、 多 媒体 和 canvas 元 素 等 HTML5 高 级 特性 。 这 些 特性 需要 更 高 的 编程 技 
AR, 但 也 能 显著 提升 Web 内 容 的 品质 。 使 用 HTML5 时 这 些 特性 并 非 非 用 不 可 , 不 过 对 于 复杂 项 目 
来 说 它们 值得 一 试 。 

















































































































注意 ”本 书 没有 涉及 的 一 种 HTML5 相 关 技 术 是 SVG (Scalable Vector Graph， 可 缩放 拓 量 图 形 )。 
使 用 SVG 技术 ， 可 以 用 标记 或 JavaScript 生 成 二 维 矢量 图 形 。 这 不 是 一 个 简单 的 话题 。 对 
SVG 感 兴趣 的 读者 可 参阅 Kurt Cagle 所 著 的 SFG Programming— 3$ , iX # H Apress th Wh. 


1.5 HTML5 的 更 多 信息 


虽然 本 书 力求 做 到 全 面 详 尽 , 但 是 有 些 事情 还 是 难以 避免 。 读 者 可 能 会 遇 到 我 未 兽 提 及 的 情 
W, 也 可 能 会 有 问题 但 在 书 中 找 不 到 答案 。 在 此 情况 下 ,首选 的 参考 资料 是 W3C 的 网 站 。 读 者 可 
以 在 此 细 读 相关 标准 ,并 能 明白 浏览 器 应 该 如 何 处 理 。 那 些 标准 可 能 不 太 好 读 ( 甚至 有 自我 参照 
倾向 )， 但 能 提供 一 些 有 用 的 深层 信息 。 

还 有 一 个 资料 来 源 是 Mozilla 开 发 者 网 络 。 它 更 具 亲 和 力 , 不 过 权威 性 略 有 不 如 。 上 面 有 大 量 
关于 各 种 HTML 特 性 的 有 用 信息 ， 包 括 一 些 HTML5 方 面 的 很 不 错 的 内 容 。 





















































1.6 小结 


本 章 为 讲解 HTML5S 提 供 了 一 些 背景 知识 , 罗列 了 HTML 发 展 史 上 的 一 些 关键 转折 点 , 并 说 明 
了 HTML5 的 应 对 方式 。 下 一 章 将 告诉 读者 如 何 为 使 用 本 书 中 的 大 量 例子 做 好 准备 。 在 此 之 后 ， 
我 们 就 将 从 HTML 元 素 本 身 入 手 开 始 HTML5 的 探索 之 旅 。 
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磨 刀 不 误 砍 柴 工 。 任 何 Web 开 发 工作 都 需要 一 些 基 本 工具 。 要 想 自己 重 做 一 遍 本 书后 面 的 一 
些 高 级 范例 ， 也 需要 用 到 本 章 介绍 的 一 种 软件 。 

说 到 Web 开 发 工具 ,大 家 都 乐意 看 到 有 大 把 免费 和 开源 的 软件 可 用 。 编 写本 书 示 例 时 用 到 的 
所 有 工具 均 可 免费 获取 。 选 好 喜欢 的 装备 ，HITML5 之 旅 即 可 启程 。 


2.1 挑选 浏览 器 


学 习 本 书 所 需 的 工具 中 , 最 重要 的 是 浏览 器 。 书 中 所 用 浏览 锅 只 限于 主流 产品 。 此 处 所 谓 主 
流产 品 ， 指 的 是 下 列 几 种 浏览 器 的 桌面 版 本 : 
D Google Chrome; 
ū Mozilla Firefox; 
L1 Opera; 
Q) Apple Safari; 
O Internet Explorer, 

这 些 浏 览 器 用 户 最 多 。 与 手机 版 本 相 比 ， 其 桌面 版 本 更 新 更 频繁 ， 特 性 也 更 丰富 。 读 者 可 能 
会 发 现 这 里 没有 提 到 你 喜欢 的 浏览 器 , 这 并 不 代表 你 的 浏览 器 不 支持 书 中 介绍 的 特性 。 不 过 我 建 
议 还 是 使 用 这 里 列 出 的 浏览 器 为 好 。 

我 最 喜欢 的 浏览 顺 是 谷歌 的 Chrome。 我 喜欢 它 的 简洁 ， 还 有 它 附 带 的 一 些 称 手 的 开发 工具 。 
出 于 这 个 原因 ， 书 中 揪 图 多 为 显示 HTMLS 文 档 的 谷歌 Chrome 的 屏幕 截图 。 不 好 Chrome 这 一 口 的 
读者 可 以 使 用 Firefox 或 Opera， 这 两 种 浏览 器 对 HTML5 的 支持 不 逊 于 Chrome。 相 比 之 下 ，Safari 
和 Internet Explorer 略 显 落后 。 

Internet Explorer 目 前 的 情况 有 些 意 思 。 本 书写 作 之 时 ，Internet Explorer 9 已 经 发 布 ， 它 对 一 
些 基 本 的 HTML5S 特 性 支持 得 不 错 。 目 前 Internet Explorer 10 已 有 预览 版 ， 它 的 改进 不 小 ， 然 而 仍 
然 缺 乏 对 一 些 关键 特性 的 支持 。 不 过 事情 已 经 很 清楚 ， 微 软 在 Windows 8 的 规划 中 包括 了 基于 
HTML5 和 JavaScript 的 应 用 程序 开发 。 这 意味 着 在 Windows 8 发 布 的 时 候 Internet Explorers | SE n] 28 
出 色 地 支持 HTML5。 
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注意 ”请 不 要 来 信 告 诉 我 你 中 意 的 浏览 器 如 何如 何 比 我 的 好 。 我 知道 你 的 浏览 器 很 可 人 ， 知 道 
你 很 有 眼光 。 我 也 祝愿 你 欢 欢喜 喜 一 用 许多 年 。 要 是 你 实在 不 想 就 这 么 凑合 ， 我 可 以 卖 
套 补救 工具 给 你 ( 收费 只 有 区 区 50 美 元 ) 一 一 其 中 包括 一 扎 纸 、 一 把 剪刀 和 少许 胶水 。 
书 中 凡 有 插图 的 地 方 ， 你 都 可 以 打印 一 张 自 己 浏览 器 的 图 ， 剪 下 来 粘 上 去 ， 和 蒙 住 原来 的 
Chrome 的 图 。 为 了 内 心安 宁 ， 这 点 代价 是 微不足道 的 。 我 猜 你 也 一 定 同意 这 一 点 。 


2.2 挑选 HTML 编辑 器 


编写 HTML 文 档 需要 编辑 器 。 任 何 文本 编辑 器 都 可 以 ， 不 过 我 建议 找 款 对 HIML ( 最 好 是 
HTML5) 有 专门 支持 的 。 这 种 编辑 右 通 常会 对 标记 进行 语法 检查 ， 具 备 能 减轻 用 户 打 字 工 作 量 
的 自动 补 全 功能 ， 还 有 可 以 用 来 同步 显示 代码 变化 所 产生 的 效果 的 预览 面板 。 

本 书 用 的 是 出 自 ActiveState 的 Komodo Edit ( 可 从 activestate.com 获 取 )。 这 是 一 款 免费 、 开 源 
的 编辑 器 。 它 对 HTML 的 文 持 有 其 独到 之 处 ， 而 且 比 较 接 近 我 心中 理想 编辑 器 的 样子 。 我 跟 
ActiveState 没 有 来 往 , 无 意 为 Komodo Edit 做 广告 , 这 里 提 到 它 只 不 过 是 因为 我 觉得 它 对 这 本 书 和 
其 他 一 些 项 目 很 有 用 。 























































































































2.3 挑选 Web 服务 器 


Web 服 务 咒 对 于 学 习 本 书 而 言 并 非 不 可 或 缺 ， 不 过 如 果 HTML 文 档 是 从 磁盘 〈 而 非 Web 服 务 
d) 加 载 的 话 ， 有 些 特性 的 表现 会 有 所 不 同 。 本 书 的 例子 用 什么 Web 服 务 器 都 行 ， 免 费 的 开源 
Web 服 务 器 有 的 是 。 我 用 的 是 IIS 7.5 一 一 出 自 微软 的 Web 和 应 用 程序 服务 器 。 这 个 不 是 免费 产品 。 
不 过 我 有 一 台 运 行 Windows Server 2008 R2 的 开发 用 服务 器 ， 所 以 需要 的 特性 基本 上 都 齐全 了 。 


2.4 获取 Node.js 


在 本 书 一 些 章节 中 , 我 需要 编写 运行 在 后 端 服务 器 上 的 代码 。 为 此 我 使 用 了 近来 迅速 走红 的 
Node.js。 其 简洁 的 事件 驱动 型 /O 很 适合 处 理 容量 大 但 数据 传输 率 不 高 的 Web 请 求 。 

不 熟悉 Node.js 不 要 紧 。 之 所 以 选择 它 是 因为 我 要 用 JavaScript 编 写 服务 器 脚本 ， 这 样本 书 就 
不 必 再 引进 另 一 门 编程 语言 。 我 不 打算 解释 Node.js 的 工作 方式 , 甚至 也 不 打算 详细 解释 书 中 的 服 
务 器 脚本 。 不 过 ， 有 JavaScript 功 底 的 读者 应 该 能 推测 出 它们 的 功能 。 

Nodejs 可 以 从 http:/nodejs.org 下 载 。 本 书 使 用 的 是 0.4.11 版 。 由 于 Node,js 升 级 很 快 ， 读 者 读 
到 本 书 的 时 候 可 能 会 发 现 它 已 经 发 布 了 更 新 的 版 本 。 

































































获取 multipart 模块 
并 非 所 有 要 用 到 的 功能 都 能 在 Nodejs 核 心 程序 包 中 找到 。 读 者 还 需要 用 到 multipart 模 块 ， 
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它 可 以 从 这 个 地 址 下 载 : https://github.com/isaacs/multipart-js， 下 载 后 根据 说 明 安 装 即 可 。 第 32 章 
和 第 33 章 介绍 Ajax 技术 时 要 用 到 这 个 模块 。 


2.5 获取 示例 代码 


本 书 所 有 示例 HTML 文 档 均 可 从 apress.com 免 费 获 得 。 它们 按 章 组 织 , 还 附带 有 支持 资源 (第 
34 章 所 用 的 视频 和 音频 内 容 除外 ， 因 为 清理 媒体 内 容 很 麻烦 )。 








2.6 小 结 


本 章 概述 了 准备 学 习 后 续 章 节 所 需 的 基本 工具 。Web 开 发 内 需要 一 些 简单 工具 ( 其 中 最 重 
要 的 是 浏览 器 )， 它 们 都 可 以 免费 获得 。 下 面 三 章 将 要 介绍 HTML、CSS 和 JavaScript 方 面 的 基础 
知识 。 
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初探 HTML 























开发 人 员 多 少 都 知道 一 点 HTML。 近 年 来 它 的 身影 随处 可 见 ， 即 便 是 那些 从 不 需要 写 HTML 
代码 的 人 ， 也 很 可 能 见 过 一 些 。 为 了 让 读者 打 好 基础 ， 本 章 将 回头 介绍 HTML 的 基本 知识 一 一 就 
从 HTML 的 目标 及 其 工作 原理 讲 起 吧 。 我 会 解释 一 些 HTML 中 的 基本 术语 ， 并 且 介 绍 一 些 几乎 所 
有 网 页 都 要 用 到 的 核心 元 素 。 

顾名思义 ，HTML 是 一 种 标记 语言 。 其 标记 以 应 用 于 文档 内 容 ( 例如 文本 ) 的 元 素 为 其 存在 
形式 。 在 后 面 的 各 节 中 ,我 会 解释 各 种 HTML 元素 的 区 别 ， 以 及 使 用 各 种 属性 配置 这 些 元 素 的 方 
法 ， 并 且 介 绍 一 组 可 用 于 所 有 HTML 元素 的 全 局 属性 。 表 3-1 概 括 了 本 章 内 容 。 


表 3-1 ”本章 内 容 概要 



































































































































































































































jg a 解决 方案 代码 清单 
标记 文档 内 容 使 用 HTML 元 素 3-1 ~ 3-5 
细 调 浏览 器 处 理 HTML 元 素 的 方式 把 一 个 或 多 个 属性 应 用 到 元 素 上 3-6~ 3-10 
声明 文档 包含 的 是 HTML 内 容 使 用 DocTYPE 和 html 元 素 3-11 
描述 文档 使 用 head 元 素 ， 其 中 包含 一 个 或 多 个 元 数据 元 素 (其 ”3-12 
说 明 见 第 7 章 ) 
在 HTML 文 档 中 添加 内 容 使 用 pody 元 素 ， 其 中 包含 文本 内 容 和 其 他 HTML 元 素 。 3-13 
定义 用 于 选择 某 个 元 素 的 快捷 键 使 用 全 局 属性 accesskey 3-14 
对 元 素 进行 分 类 ， 以 便 统一 其 样式 或 用 程序 ”使 用 全 局 属性 class 3-15 ~ 3-17 
查找 该 元 素 
使 元 素 的 内 容 可 被 编辑 使 用 全 局 属性 contenteditable 3-18 
为 元 素 添加 快捷 菜单 使 用 全 局 属性 contextmenu ( 目前 尚 无 支持 这 个 属性 的 ”一 
浏览 器 ) 
间 定 元 素 内 容 的 布局 方向 使 用 全 局 属性 dir 3-19 
声明 元 素 可 拖 动 使 用 全 局 属性 draggable ( HTML5 中 的 拖 放 功 能 详 见 一 
第 37 章 ) 
声明 可 将 其 他 元 素 拖 放 到 某 个 元 素 上 使 用 全 局 属性 dropzone ( HTML5 中 的 拖 放 功 能 详 见 ”一 
第 37 章 ) 
表示 某 个 元 素 及 其 内 容 组 需 关 注 使 用 全 局 属性 hidden 3-20 
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( 续 ) 
问 sm 解决 方案 代码 清单 

为 元 素 分 配 一 个 独一无二 的 标识 符 ， 以 便 对 ”使 用 全 局 属性 id 3-21 
其 应 用 样式 或 用 程序 选择 该 元 素 

声明 元 素 内 容 所 用 语言 使 用 全 局 属性 lang 3-22 
声明 是 否 应 检查 元 素 内 容 的 拼写 错误 使 用 全 局 属性 spellcheck 3-23 
直接 定义 元 素 的 样式 使 用 全 局 属性 style 3-24 
指定 HTML 文档 中 元 素 的 Tab 键 次 序 使 用 全 局 属性 tabindex 3-25 
为 元 素 提 供 额 外 信息 (通常 显示 为 工具 提示 ) ”使 用 全 局 属性 title 3-26 
































3.1 使 用 元 素 
代码 清单 3-1 是 一 个 应 用 于 文本 内 容 的 HTML 元 素 的 简 例 。 


代码 清单 3-1 HTML 元 素 示 例 

I like <code> apples</code> and oranges. 

这 里 用 粗 体 标明 元 素 。 该 元 素 分 为 三 部 分 。 其 中 有 两 部 分 称 为 标签 (tag): 开始 标签 <code> 
和 结束 标签 </code>。 夹 在 两 个 标签 之 间 的 是 元 素 的 内 容 ( 本 例 中 为 单词 apples )。 两 个 标签 连同 
它们 之 间 的 内 容 构成 code 元 素 。 其 结构 剖析 见 图 3-1。 















































开始 标签 结束 标签 
I like | «code» apples </code> | and oranges. 
内 容 





图 3-1 HTML 元素 剖析 


元 素 是 一 种 用 来 向 浏览 器 说 明文 档 内 容 的 工具 。 其 效果 体现 在 内 容 之 上 。 不 同 的 元 素 有 不 同 
的 确切 含义 。 例 如 ， 前 述 code 元 素 代 表 的 是 计算 机 代码 片段 。 

















提示 “元素 名 不 区 分 大 小 写 。 CODE>、“code> 甚 至 CoDe> 都 会 被 浏览 器 视 为 code 元 素 的 开始 标签 。 
一 般 来 说 ， 应 该 认定 某 种 大 小 写 格式 并 且 贯彻 始终 。 近 年 来 更 常见 的 风格 是 全 部 使 用 小 
写 。 本 书 采用 的 就 是 这 种 格式 。 











HTML 定 义 了 各 种 各 样 的 元 素 ， 它 们 在 HTML 文档 中 起 着 各 不 相同 的 作用 。code 元 素 是 语义 
元 素 的 一 个 例子 。 语 义 元 素 可 以 用 来 说 明 内 容 的 含义 以 及 内 容 的 不 同 部 分 之 间 的 关系 。 第 8 章 还 
会 对 此 做 进一步 说 明 。 下 面 的 图 3-2 显 示 了 code 元 素 的 效果 。 
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Ilike appies and oranges. 














图 3-2 “code 元 素 在 浏览 器 中 的 显示 效果 


注意 ,浏览 器 不 会 显示 元 素 的 标签 ， 它 的 任务 是 解读 HTML 文 档 ， 然 后 向 用 户 呈 现 一 个 体现 
了 HTMIL 元素 作 用 的 视图 。 


























将 内 容 与 呈现 分 开 
有 些 HTML 元 素 会 对 呈现 形式 产生 曲 E 
内 容 的 方式 。code 元 素 就 是 一 例 。 浏览 器 遇 到 该 元 素 时 , 会 用 等 宽 字 体 
以 从 图 3-2 中 看 出 来 。 
用 HTML 元 素 控制 内 容 呈 现形 式 的 做 法 如 今 受 到 强烈 反对 。 现 在 的 观点 是 应 该 用 HTML 元 
m 告 构 和 含义 ， 用 CSS ( 第 4 章 将 会 介绍 ) 控制 内 容 呈 现 给 用 户 的 形式 。 
会 影响 呈现 形式 的 那些 元 素 通常 产生 于 HTML 的 早期 版 本 ， 当 时 将 内 容 与 其 呈现 形式 分 
P ee 这 些 元 素 在 浏览 器 中 呈现 时 有 默认 的 呈现 样式 
(例如 code 元 素 通常 使 用 等 宽 字体 ), 不 过 可 以 用 CSS 改 变 其 默认 样式 。 第 4 章 会 谈 到 这 个 问题 。 





3.1.1 了 解 本 章 用 到 的 元 素 


为 了 让 读者 对 HTML 有 个 初步 的 认识 ,我 需要 用 到 一 些 后 面 各 章 中 才 会 讲 到 的 元 素 。 表 3-2 
列 出 了 这 些 元 素 及 其 简要 说 明 ， 还 有 其 全 面 说 明 所 在 的 章 编号 。 


















































表 3-2 元素 摘 要 
x EX XO 明 所 在 章 
a 生成 超 链接 8 
body 表示 HTML 文档 的 内 容 
button 生成 用 以 提交 表单 的 按钮 12 
code 表示 计算 机 代码 片段 P 
DOCTYPE 表示 HTML 文档 的 开始 T 
head 表示 HTML 文档 的 头 部 区 域 7 
hr 表示 主题 的 改变 
html 表示 文档 的 HTML 部 分 
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CHR) 
元 Žž 说 — BB 所 在 章 
input 表示 用 户 输入 的 数据 8 
label 生成 另 一 元 素 的 说 明 标 签 ? 12 
p 表示 段落 9 
style 定义 CSS 样 式 7 
table 表示 用 表格 组 织 的 数据 1 
td 表示 表格 单元 格 1 
LEA pared 生成 用 于 获取 用 户 输入 数据 的 多 行文 本 框 4 
th 生成 表 头 单元 格 1 
title 表示 HTML 文档 的 标题 7 
24 表示 表格 行 1 











3.1.2 ”使 用 空 元 素 


元 素 的 开始 和 结束 标签 之 间 并 非 一 定 要 有 内 容 。 没 有 内 容 的 元 素 称 为 空 元 素 。 代 码 清单 3-2 
所 示 就 是 一 例 。 


代码 清单 3-2 ” 空 HTML 元 素 
I like <code></code> apples and oranges. 


有 些 元 素 为 空 时 没有 意义 〈 code 就 是 其 中 之 一 )， 即 便 如 此 ， 它 也 是 有 效 的 HTML 代 码 。 


3.1.3 ”使 用 自 闭合 标签 
空 元 素 可 以 更 简洁 地 只 用 一 个 标签 表示 。 如 代码 清单 3-3 所 示 。 
代码 清单 3-3 ”只 用 一 个 标签 表示 空 元 素 


I like <code/> apples and oranges. 
此 例 将 开始 标签 和 结束 标签 合 二 为 一 。 通 常用 来 表示 结束 标签 开始 的 斜 杠 符号 (/) 在 此 被 
放 到 标签 的 末尾 。 代码 清 单 3-2 和 代码 清单 3-3 中 的 元 素 等 价 , 但 只 用 一 个 标签 的 表示 法 更 为 简洁 。 


3.1.4 RAHENA 


有 些 元 素 只 能 使 用 一 个 标签 表示 ,在 其 中 放置 任何 内 容 都 不 符合 HTML 规范。 这 类 元 素 称 为 
JE JG X (void element )，hz 就 是 这 样 一 个 元 素 。 它 是 一 种 组 织 性 元 素 (第 9 章 将 介绍 一 些 其 他 的 这 
类 元 素 )， 用 来 表示 内 容 中 段落 级 别 的 终止 。 虚 元 素 有 两 种 表示 法 。 第 一 种 只 使 用 开始 标签 ， 如 










































































(D 1abel 和 tag 都 是 标签 的 意思 。 为 示 区 别 ， 本 书 在 提 到 1abel 时 ， 一律 译 为 “说 明 标签 "。 一 一 译 者 注 
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代码 清单 3-4 所 示 。 
代码 清单 3-4 ”用 单个 开始 标签 表示 虚 元 素 


I like apples and oranges. 


<hr> 
Today was warm and sunny. 


浏览 器 知道 hz 是 虚 元 素 , 所 以 不 会 等 待 其 结束 标签 出 现 。 第 二 种 表示 法 在 此 基础 上 加 了 一 个 
斜 杠 符号 ， 其 形式 与 空 元 素 一 致 ， 如 代码 清单 3-5 所 示 。 


代码 清单 3-5 ”用 空 元 素 结构 表示 虚 元 素 


I like apples and oranges. 
<hr /> 
Today was warm and sunny. 


我 更 喜欢 这 种 表示 法 ， 并 且 会 在 本 书 中 采用 。 顺 便 提 一 句 ，hr 元 素 也 是 一 个 具有 呈现 形式 
含义 的 元 素 ， 它 会 显示 为 一 条 横 线 ( 这 也 是 其 名 称 的 由 来 )。 在 图 3-3 中 可 以 看 到 hr 元 素 的 默认 
表现 形式 。 
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I like apples and oranges. 


Today was warm and sunny. 














图 3-3 ”hr 元 素 的 默认 表现 形式 





用 不 用 非 强 制 使 用 的 开始 和 结束 标签 


许多 HTML5 元 素 在 茶 些 条 件 下 可 以 省 略 其 中 一 个 标签 。 例 如 ，html 元 素 ( 第 7 章 将 会 讲 
到 ) 的 结束 标签 在 此 情况 下 就 可 以 省 略 :“ 该 元 素 后 面 没有 紧 跟 着 一 条 注释 ， 且 该 元 素 包 含 
着 一 个 非 空 或 者 其 开始 标签 未 曾 省 略 的 body 元 素 "。 这 上 段 引 文 出 自 一 份 正 式 的 HTMLS 规 范文 
档 。 你 不 妨 读 读 这 些 规范 ( 可 从 w3c.org 获 得 )， 但 是 要 注意 : 它们 都 是 以 这 样 一 种 “活泼 ” 
的 风格 写 就 。 

uo o o Bee Here 来 麻烦 。 
HTML 文 档 并 非 只 由 浏览 器 处 理 , 你 的 同事 和 未 来 的 你 (在 以 后 修整 和 升级 自己 的 应 用 
程序 时 ) 也 会 阅读 它们 。 浏 览 器 也 许 能 明白 某 个 标签 为 什么 eee 但 你 的 同事 未 必 能 
轻松 看 出 来 ， 就 算 你 自己 以 后 回头 修改 代码 也 是 如 此 。 出 于 这 个 原因 ， 本 书 不 会 详 述 前 面 
所 说 的 那些 特殊 规定 ， 除 非 有 必要 破例 (届时 会 有 解释 )， 否 则 书 中 的 元 素 都 会 有 开始 和 结 
束 标 签 。 





16 第 3 章 ， 初探 HTML 





3.2 ”使 用 元 素 属 性 


元 素 可 以 用 属性 (attribute ) 进行 配置 。 代 码 清 单 3-6 所 示 为 应 用 到 a 元 素 上 的 一 个 属性 。 这 个 
元 素 用 来 生成 超 链接 。 点 击 超 链 接 就 会 加 载 男 一 个 HTML 文 档 。 
代码 清单 3-6 ”使 用 元 素 属 性 

I like «a href-"/apples.html"»apples«/a» and oranges. 
属性 只 能 用 在 开始 标签 或 单个 标签 上 ， 不 能 用 于 结束 标签 。 如 图 3-4 所 示 ， 属 性 具有 名 称 和 
值 两 部 分 。 
































属性 名 
, 
I like«a | href |=| " apples.html" | »apples«/a»and oranges. 























! 
属性 值 
图 3-4” 为 HTML 元 素 添加 属性 

有 一 些 全 局 属性 可 用 于 所 有 HTML 元 素 ， 本 章 稍 后 将 有 介绍 。 除 了 这 些 全 局 属性 ， 元 素 还 有 
用 来 提供 其 特有 配置 信息 的 专 有 属性 。href 属 性 就 限于 a 元 素 , 它 配置 的 是 超 链接 的 目的 URL。a 
元 素 定义 了 一 批 专 有 属性 ， 它 们 会 在 第 8 章 中 得 到 说 明 。 


















































提示 。 上面 的 示例 中 使 用 双 引 号 界定 属性 值 ( 形 如 "属性 值 " )， 不 过 也 可 以 用 单 引号 ( 形 如 ' 属 
性 值 ' )。 如 果 属 性 值 本 身 含有 引号 ， 那么 两 种 引号 都 要 用 到 ( 形 如 "' 含 引号 的 ' 属 性 值 "， 
或 '" 含 引号 的 "属性 值 ' )。 


3.2.1 一 个 元 素 应 用 多 个 属性 

一 个 元 素 可 以 应 用 多 个 属性 , 这 些 属性 间 以 一 个 或 几 个 空格 分 隔 即 可 。 代码 清单 3-7 即 为 一 例 。 
代码 清单 3-7 ”为 一 个 元 素 设置 多 个 属性 

I like <a class-"link" href-"/apples.html" id="firstlink">apples</a> and oranges. 

这 些 属 性 的 顺序 未 作 要 求 , 全 局 属性 和 元 素 专 有 属性 可 随意 交错 。 上 面 的 代码 清单 就 是 这 样 
做 的 ， 其 中 class 和 id 是 全 局 属性 ( 本 章 稍 后 会 讲 到 这 些 属性 )。 


3.2.2 ”使 用 布尔 属性 


有 些 属性 属于 布尔 属性 ,这 种 属性 不 需要 设 定 一 个 值 ， 只 需 将 属性 名 添加 到 元 素 中 即 可 ， 如 
代码 清单 3-8 所 示 。 
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代码 清单 3-8 布尔 属性 

Enter your name: <input disabled> 

此 例 中 的 布尔 属性 是 disabled， 元 素 中 只 添加 了 该 属性 的 名 称 。input 元 素 为 用 户 在 HTML 
表单 (在 第 12 章 中 讲述 ) 中 输入 数据 提供 了 一 种 手段 。 添加 disabled 属 性 可 以 阻止 用 户 输入 数据 。 E 
布尔 属性 有 一 点 小 古怪 , 它 以 本 来 存在 而 不 是 用 户 为 其 设 定 的 值 对 元 素 进行 配置 。 上 例 中 并 未 这 
样 设置 disabled="true", 仅仅 是 添加 了 disabled 这 个 词 而 已 。 为 布尔 属性 指定 一 个 空 字符 串 ("" ) 
或 属性 名 称 字符 串 作为 其 值 也 有 同样 的 效果 ， 如 代码 清单 3-9 所 示 。 


代码 清单 3-9 为 布尔 属性 指定 空 字符 串 值 


Enter your name: <input disabled=""> 
Enter your name: <input disabled="disabled"> 
























































3.2.3 ”使 用 自 定义 属性 
用 户 可 自 定 义 属 性 ， 这 种 属性 必须 以 data- 开 头 。 代 码 清单 3-10 演 示 了 这 种 属性 的 用 法 。 























代码 清单 3-10 ”对 元 素 应 用 自 定义 属性 
Enter your name: <input disabled="true" data-creator="adam" data-purpose="collection"> 
这 种 属性 的 恰当 名 称 是 作者 定义 属性 , 有 时 也 称 扩展 属性 。 不 过 我 更 喜欢 使 用 自 定义 属性 这 
个 常见 得 多 的 名 称 。 
自 定 义 属性 是 对 HTML4 中 “浏览 絮 应 当 忽 略 不 认识 的 属性 ”这 种 广泛 应 用 的 技巧 的 正式 规 
定 。 在 这 类 属性 名 称 之 前 添加 前 级 data- 是 为 了 避免 与 HTML 的 未 来 版 本 中 可 能 增加 的 属性 名 冲 
突 。 自 定义 属性 与 CSS (在 第 4 章 介绍 ) 和 JavaScript ( 在 第 5$ 章 介绍 ) 结合 起 来 很 有 用 。 


3.3 创建 HTML 文档 


元 素 和 属性 不 会 孤立 存在 ， 它 们 是 用 来 标记 HTML 文 档 内 容 的 。 要 创建 一 个 HTML 文 档 ， 最 
简单 的 方法 是 创建 一 个 文本 文件 , 并 将 其 文件 扩展 名 设置 成 为 这 类 文件 规定 的 .html。 这 个 文件 可 
以 直接 从 磁盘 载 人 浏览 器 ， 也 可 以 从 Web 服 务 器 载 人 《在 本 书 中 ， 我 一 般 都 要 使 用 Web 服 务 顺 。 
我 的 Web 服 务 器 名 为 titan， 这 个 名 字 经 常 出 现在 书 中 屏幕 截图 的 浏览 器 窗口 中 )。 

































































浏览 器 和 用 户 代理 
在 本 章 (及 本 书 大 部 分 章节 ) 中 ，HTML 文 档 都 是 针对 浏览 器 创建 的 。 这 样 看 待 HTML 文 
档 较 为 省 事 ， 而 且 HTML 文 档 最 常见 的 使 用 方式 也 是 用 浏览 器 查看 。 但 是 还 有 其 他 情况 需要 考 
虐 。 用 于 处 理 HTML 文 档 的 各 种 软件 有 一 个 共同 的 名 称 叫做 用 户 代理 (user agent )。 浏 览 器 是 
最 流行 的 用 户 代 理 ， 但 不 是 唯一 的 一 种 。 
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非 浏览 器 类 用 户 代理 现在 还 很 少 ， 以 后 可 能 会 多 起 来 。 在 HIML5 中 更 加 强调 将 内 容 与 呈 
ADA, 正 是 因为 认识 到 HTML 内 容 并 不 总 是 会 被 显示 给 用 户 看 。 本 书 尽 管 说 的 还 是 浏览 
器 OFS 最 强势 的 一 类 用 户 代 理 )， 但 是 最 好 还 是 记 住 : 你 的 HTML 文 档 有 可 能 
会 给 别 的 一 些 软 件 处 理 。 


iden 











HTML 文 档 具有 特定 的 结构 ， 最 起 码 要 有 一 些 关 键 性 的 元 素 。 本 书 绝 大 多 数 示 例 均 为 完整 的 
HTML 文 档 , 这样 读 者 很 快 就 能 轻松 看 出 元 素 的 应 用 方式 和 效果 。 为 了 给 你 一 个 初步 印象 ， 在 此 
我 要 先 带 你 看 一 个 基本 的 HTML 文 档 。 代 码 清 单 中 所 有 的 HTML 元 素 都 会 在 后 面 各 章 得 到 详细 讲 
解 ， 本 章 提供 了 它们 的 相关 参照 信息 。 


HTML 与 XHTML 的 对 比 


尽管 本 书 讲 的 是 HTML， 但 我 要 是 不 提 一 下 XHTML ( 在 HTML 前 面 如 了 一 个 X ) 8938, AB 
就 太 不 负责 了 。 符 合 HTML 语 法 的 文档 不 一 定 符合 XML 语法 ， 因 此 用 标准 的 XML 解析 程序 处 
理 HTMIL 文 档 可 能 会 遇 到 麻烦 。 

为 了 解决 这 个 问题 ， 可 以 使 用 XHTML， 它 是 HTML 的 XML 序 列 化 形式 ( 这 就 是 说 ， 以 符 
合 XML 规范 的 方式 来 表达 文档 的 内 容 以 及 HTML 元 素 和 属性 , 以 便 XML 解析 程序 处 理 ), 此 外 ， 
也 可 以 创建 既是 有 效 HTML 文 档 也 是 有 效 XML 文档 的 多 语文 档 (polyglot document )， 不 过 这 
要 求 使 用 HTML 语 法 的 一 个 子 集 。 本 书 不 讲 XHTML, 想 了 解 更 多 XHTML 方面 的 信息 的 读者 可 
以 参阅 这 个 网 址 : http://wiki.whatwg.org/wiki/HTML vs. XHTML. 








3.3.1 外 层 结构 
HTML 文 档 的 外 层 结构 由 两 个 元 素 确定 : DOCTYPE 和 html， 如 代码 清单 3-11 所 示 。 
代码 清单 3-11 HTMLIL 文 档 的 外 层 结构 


<!DOCTYPE HTML» 
«html» 
<!-- elements go here --> 
«/html» 


EPH BDOCTYPEZU2R LENI V, Ar 9] A CAP XERSZEHTMLOCRE o ix ARP EHTMLAEGATIS : 
«IDOCTYPE HTML» 
紧 跟着 DOCTYPE 元 素 的 是 htm 元 素 的 开始 标签 。 它 告诉 浏览 器 : 自 此 直到 html 结 束 标签 ， 所 有 元 素 
内 容 都 应 作为 HTML 处理。 用 了 pocTYpE 元 素 之 后 又 接 | 使 用 html 元 素 看 起 来 可 和 BA Marek, 其 实 
早 在 HTML 标 准 小 葵 才 露 尖 人 尖 角 的 时 候 , 具有 同等 地 位 的 还 有 一 些 别 的 标记 语言 ,文档 中 可 能 会 
混合 使 用 多 种 标记 语言 。 
如 今 HTML 已 成 为 占 绝 对 优势 的 标记 语言 , 即使 在 文档 中 省 略 DOCTYPE 和 html 元 素 , 绝 大 多 数 
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浏览 器 仍 会 假定 自己 处 理 的 是 HTML 文档 。 不 过 这 并 不 意味 着 不 必 再 用 这 两 个 元 素 。 这 是 因为 它 
们 有 着 重要 的 用 途 , 而 且 依赖 浏览 器 的 默认 行为 模式 就 像 轻信 陌生 人 一 样 不 靠 谱 一 一 多 数 情况 下 
事情 很 顺利 ， 可 是 冷 不 防 就 会 出 大 漏 子 。 关 于 DOCTYPE 和 htm]1 元 素 详 见 第 7 章 。 
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部 ， 如 代码 清单 3-12 所 示 。 


代码 清单 3-12 ”在 HTML 文档 中 添加 head 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<!-- metadata goes here --> 
<title>Example</title> 
</head> 
</html> 


这 个 清单 中 的 元 数据 少 到 不 能 再 少 ,只 有 title 元 素 一 项 。 按 说 HTML 文档 中 都 应 该 包含 title 
元 素 ， 但 是 没有 的 话 浏 览 器 通常 也 不 会 在 意 。 大 多 数 浏 览 器 把 title 元 素 的 内 容 显示 在 其 窗口 的 
标题 栏 上 或 用 来 显示 文档 的 标签 页 "的 标签 位 置 上 。 第 7 章 会 详细 说 明 head 元 素 和 title 元 素 ， 以 
及 可 以 放 在 head 元 素 中 的 所 有 其 他 元 数据 元 素 。 






































提示 ”代码 清单 3-12 也 演示 了 HTML 文 档 中 注释 的 写法 。 注 释 以 标签 <1-- 开 头 ， 以 --> 结 尾 。 浏 
览 器 会 忽略 这 两 个 标签 之 间 的 一 切 内 容 。 


除了 可 包含 用 于 说 明 HTML 文 档 的 元 素 ，head 元 素 还 能 用 来 规定 文档 与 外 部 资源 ( 如 CSS 样 
式 表 ) 的 关系 ， 定 义 内 髋 CSS 样 式 ， 放 置 和 载 入 脚本 程序 。 第 7 章 将 会 示范 所 有 这 些 用 途 。 








3.8.8 AR 
文档 的 第 三 部 分 是 文档 内 容 , 这 也 是 最 后 一 个 部 分 , 放 在 body 元 素 之 中 , 如 代码 清单 3-13 所 示 。 
代码 清单 3-13 ”在 HTML 文档 中 添加 body 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<!-- metadata goes here --> 
<title>Example</title> 
</head> 
<body> 























(D 正中 称 为 选项 卡 。 一 一 译 者 注 
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<!-- content and elements go here --> 
I like <code>apples</code> and oranges. 
</body> 
</html> 


body 元 素 告诉 浏览 器 该 向 用 户 显 示 文 档 的 哪个 部 分 。 自 然 ， 本 书 大 部 分 篇 幅 都 花 在 那些 需要 
放 在 body 元 素 之 中 的 东西 上 面 。 把 body 元 素 加 进来 后 ，HTML 文 档 的 基本 框架 业已 成 型 ， 本 书 大 
部 分 例子 都 要 用 到 这 个 框架 。 


3.3.4” 父 元 素 、 子 元 素 、 后 代 元 素 和 兄弟 元 素 


HITMIL 文档 中 元 素 之 间 有 明确 的 关系 。 包 含 另 一 个 元 素 的 元 素 是 被 包含 元 素 的 父 元 素 。 在 代 
码 清单 3-13 中 ，body 元 素 是 code 元 素 的 父 元 素 ， 这 是 因为 code 元 素 位 于 body 元 素 的 开始 标签 和 结 
束 标签 之 间 。 反 过 来 说 ，code 元 素 是 body 元 素 的 子 元 素 。 一 个 元 素 可 以 拥有 多 个 子 元 素 ， 但 只 能 
有 一 个 父 元 素 。 

包含 在 其 他 元 素 中 的 元 素 也 可 以 包含 别 的 元 素 。 从 代码 清单 3-13 中 也 可 以 看 到 : html 元 素 包 
含 着 body 元 素 ， 而 后 者 又 包含 着 code 元 素 。body 元 素 和 code 元 素 都 是 html 元 素 的 后 代 元 素 , 但 是 
二 者 中 只 有 body 元 素 才 是 htm1 元 素 的 子 元 素 。 子 元 素 是 关系 最 近 的 后 代 元 素 。 具 有 同一 个 父 元 素 
的 几 个 元 素 互 为 兄弟 元 素 。 在 代码 清单 3-13 中 ，head 元 素 和 body 元 素 就 是 兄弟 ， 这 是 因为 它们 都 
是 html 元 素 的 子 元 素 。 

元 素 间 关 系 的 重要 性 在 HTML 中 随处 可 见 。 一 个 元 素 能 以 什么 样 的 元 素 为 父 元 素 或 子 元 素 是 
有 限制 的 ， 这些 限制 通过 元 素 类 型 表现 出 来 (下 一 节 将 讨论 这 个 问题 )。 即 将 在 第 4 章 讲述 的 CSS 
中 元 素 间 的 关系 也 很 重要 ,圈定 应 用 样式 的 元 素 的 方法 之 一 就 要 借助 元 素 的 父子 关系 。 最 后 ,本 
书 第 四 部 分 中 介绍 的 文档 对 象 模 型 (DOM ) 也 会 涉及 通过 搜索 文档 树 查 找 文档 中 某 个 元 素 ， 而 
文档 树 正 是 元 素 之 间 关 系 的 一 种 表述 。 在 HTML 世 界 里 ， 从 后 代 中 辨认 兄弟 是 一 种 重要 能 力 。 


3.3.5 了解 元 素 类 型 


HTML5 规 范 将 元 素 分 为 三 大 类 : 元 数据 元 素 (metadata element )、 流 元 素 ( flow element ) 和 
短语 元 素 (phrasing element )。 

元 数据 元 素 用 来 构建 HTML 文 档 的 基本 结构 ， 以 及 就 如 何 处 理 文档 向 浏览 器 提供 信息 和 指 
示 。 其 说 明 见 第 7 章 。 

另外 两 种 元 素 略 有 不 同 , 它们 的 用 途 是 确定 一 个 元 素 合法 的 父 元 素 和 子 元 素 范 围 。 短 语 元 素 
是 HTML 的 基本 成 分 。 第 8 章 会 介绍 最 常用 的 短语 元 素 。 流 元 素 是 短语 元 素 的 超 集 。 这 就 是 说 ， 
所 有 短语 元 素 都 是 流 元 素 ， 但 并 非 所 有 流 元 素 都 是 短语 元 素 。 

有 些 元 素 无 法 归 入 上 述 三 种 类 型 , 这些 元 素 要 么 没有 什么 特别 的 含义 ,要么 只 能 用 在 一 些 非 
常 有 限 的 情况 下 。1i 元 素 就 是 受 限 元 素 的 一 个 例子 。 它 表示 列表 项 ， 只 能 有 三 种 父 元 素 : ol ( 表 
示 有 序列 表 )、ul ( 表示 无 序列 表 ) 和 menu ( 表示 菜单 )。 该 元 素 详 见 第 9 章 。 从 第 6 章 开 始 的 所 有 
元 素 说 明 都 包含 了 元 素 所 属 类 型 的 信息 。 
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3.4 使 用 HTML 实体 


从 本 章 的 例子 中 可 以 看 到 , HTML 文 档 中 有 些 字符 具有 特殊 含义 
个 字符 。 有 时 需要 在 文档 内 容 中 用 到 这 些 字符 , 但 不 想 让 它们 被 当做 HTMIL 处 到 
用 HIML 实 体 〈entity )。 实 体 是 浏览 器 用 来 蔡 代 特殊 字符 的 一 种 代码 。 表 3-3 列 出 了 一 些 常 用 








实体 。 





表 3-3 ”常用 HTML 实 体 











BH] d 








i. HY Xe RH > 3o PS 
为 此 应 该 使 





字 FF 实体 名 称 实体 编号 

< &lt; &#60; 

> &gt; &H62; 

& &amp ; 838; 

€ &euro; 818364; 
£ &pound; 881163; 

$ &sect; 81167; 

© &copy; 81169; 

9 &reg; 81174; 

* &trade; 818482; 


每 个 特殊 字符 都 有 一 个 实体 编号 ， 可 以 用 来 在 文档 内 容 中 代表 该 














SEP 2hi^ 158138; 。 特 别 常用 的 特殊 字符 还 有 对 应 的 实体 名 称 。 例 如 ， 对 于 浏览 器 来 说 ，& 


























&amp; 是 一 回 事 。 











3.5 HTML5 全 局 属性 




















本 章 前 面 讲 过 如 何 用 属 怕 


FE 配 置 元 素 。 每 种 元 素 都 能 规定 自己 的 属 怕 








(local attribute ) 第 6 章 在 开始 








示范 用 法 。 每 一 个 局 部 属性 者 


属性 还 有 男 一 种 类 型 : 全 
局 属性 可 以 用 在 任何 一 个 元 素 身上 , 不 过 这 不 一 定 会 带 来 有 意义 或 有 用 的 行为 改变 。 下 面 ; 
绍 所 有 全 局 属性 并 示范 其 用 法 。 有 些 全 局 














可 以 用 来 控制 元 素 独 有 行为 的 某 个 方面 。 





y MY 


TTo 


E, xd 




















属性 称 为 局 部 属 ， 


详细 介绍 各 种 元 素 的 时 候 , 将 会 列 出 它们 具有 的 所 有 局 部 属性 并 | 











性 。 对 于 它们 这 里 会 提供 相关 章节 的 参照 信息 。 


3.5.1 accesskey 属性 














个 在 简单 表单 中 使 用 这 个 属性 
来 看 看 这 个 例子 。 




















例如 ， 字符 “&” 的 
38; 和 


生 
H. 





局 属性 (global attribute )。 它 们 用 来 配置 所 有 元 素 共有 的 行为 。 全 
和 会 介 


属性 涉及 本 书后 面 才 会 详细 讲 到 的 更 宏大 的 HTML 特 


使 用 accesskey 属 性 可 以 设 定 一 个 或 几 个 用 来 选择 页 面 上 的 元 素 的 快捷 键 ,代码 清单 3-14 是 一 
FE 的 例子 。 表单 是 第 12 章 到 第 14 章 的 主题 ,可 以 在 读 过 那 几 章 之 后 再 
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代码 清单 3-14 ”使 用 accesskey 属 性 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<form> 
Name: <input type="text" name="name" accesskey="n"/> 
<p/> 
Password: <input type="password" name-"password" accesskey="p"/> 
<p/> 
<input type="submit" value="Log In" accesskey="s"/> 
</form> 
</body> 
</html> 


此 例 为 三 个 input 元 素 添加 了 accesskey 属 性 ( input 元 素 的 说 明 见 第 12 章 和 第 13 章 )。 其 目的 
是 让 网 页 或 网 站 的 熟 客 可 以 使 用 快捷 键 访问 经 常用 到 的 元 素 。 用 来 触发 accesskey 机 制 的 按键 组 
合 因 平台 而 异 ， 在 Windows 系 统 上 是 同时 按 下 Alt 键 和 accesskey 属 性 值 对 应 的 键 。 图 3-5 展 示 了 
accesskey 属 性 的 效果 。 用 户 可 以 按 Alttn 将 键盘 焦点 转移 到 第 一 个 input 元 素 , 在 此 输入 姓名 。 接 
下 来 按 Alttp 将 焦点 转 到 第 二 个 input 元 素 ， 在 此 输入 密码 。 然 后 按 Altts， 这 等 于 按 下 Log Im 按钮 
以 提交 表单 。 


r 





















































( Example 
€ CŒ © titan/listings/example| / © Example $ 
Name: [Adan] Œ | © titan/listings/example.htm walt 
Password: p 

xx: Password: ™=....| 




















图 3-5 accesskey 属 性 的 效果 





3.5.2 class 属性 


class 属 性 用 来 将 元 素 归 类 。 这 样 做 通常 是 为 了 能 够 找 出 文档 中 的 某 一 类 元 素 或 为 某 一 类 元 
素 应 用 CSS 样 式 。 代 码 清单 3-15 示 范 了 如 何 使 用 class 属 性 。 


代码 清单 3-15 ”使 用 class 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 











3.5 HTMLS 全 局 属性 
<title>Example</title> 
</head> 


<body> 
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«a class-"classi class2" href="http://apress.com">Apress web site</a> 
«p/» 


«a class-"class2 otherclass" href="http://w3c.org">W3C web site</a> 
«/body» 
«/html» 


E 


类 名 可 以 随便 取 , 不 过 最 好 取 点 具有 实际 含义 的 , 文档 中 拥有 许多 元 素 类 别 时 尤其 如 此 。class 
惊 性 本 身 没有 任何 作用 。 图 3-6 是 上 面 的 示例 在 浏览 器 中 的 
链接 。 








一 个 元 素 可 以 被 归 人 多 个 类 别 ， 为 此 在 class 属 性 值 中 提供 多 个 用 空格 分 隔 的 类 名 即 可 。 


示 结 果 ， 从 中 看 到 的 只 是 几 个 超 








© Example 
e> C 


© titan 


: ample.htm whl 
Apress web site 


W3C web site 








图 3-6 PAMIR T classi 
class 属 性 的 一 种 利用 方式 是 设 


EA IU 
4 计 CSS 样 式 时 以 所 定义 的 一 个 或 多 个 类 作为 应 用 目标 ,代码 清 
单 3-16 即 是 一 例 。 






































代码 清单 3-16 ”定义 依靠 类 起 作用 的 样式 
<!DOCTYPE HTML> 
<html> 


<head> 


<title>Example</title> 

<style type="text/css"> 
.class2 { 
background-color:grey; 
color:white; 
padding: 5px; 
margin: 2px; 

} 


.Class1 { 


} 

</style> 
</head> 
<body> 


font-size:x-large; 


<a class="class1 class2" href="http://apress.com">Apress web site</a> 
<p/> 


<a class-"class2 otherclass" href-"http://w3c.org"»W3C web site</a> 
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</body> 
</html> 


此 例 用 style 元 素 定 义 了 两 条 样式 , 第 一 条 用 于 属于 class2 类 的 元 素 , 第 二 条 用 于 属于 class1 
类 的 元 素 。 

style 元 素 的 说 明 见 第 7 章 。 第 4 章 会 介绍 样式 以 及 将 其 应 用 到 元 素 上 的 各 种 方式 。 

将 这 个 HTML 文 档 载 入 浏览 器 ， 所 定义 的 样式 会 被 应 用 到 相关 元 素 上 ， 其 效果 如 图 3-7 所 示 。 
用 类 来 确定 样式 应 用 对 象 的 好 处 在 于 不 用 对 涉及 的 元 素 一 一 重复 同样 的 样式 设置 。 

r ; cp ERE 

© Example NES 2 
€ > Œ Otitan/listings/example.html whl 























Apress web site 


W3C web site 























图 3-7 借助 class 属 性 应 用 样式 
脚本 程序 也 可 以 利用 class 属 性 。 代 码 清单 3-17 就 是 这 样 一 个 例子 。 
代码 清单 3-17 在 脚本 中 使 用 class 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
«a class="class1 class2" href="http://apress.com">Apress web site</a> 
<p/> 
«a class-"class2 otherclass" href="http://w3c.org">W3C web site</a> 
«script type-"text/javascript"» 
var elems = document.getElementsByClassName("otherclass"); 
for (i = 0; i « elems.length; i++) { 
var x = elems[i]; 
x.style.border = "thin solid black"; 
x.style.backgroundColor = "white"; 
x.style.color = "black"; 
} 
</script> 
</body> 
</html> 


此 例 中 的 脚本 程序 找 出 所 有 属于 otherclass 类 的 元 素 并 对 其 设置 了 一 些 样式 。script 元 素 在 
第 7 章 介绍 。 第 19 章 到 第 24 章 介绍 各 种 样式 属性 。 第 26 章 介绍 如 何 查找 文档 中 的 元 素 。 前 述 脚本 
的 效果 见 图 3-8。 
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/ © pample \ 
le > C! |Q titan/listings/example.html wf 








Apress web site 




















图 3-8 ”在 脚本 中 使 用 class 属 性 














3.5.3 contenteditable 属性 


contenteditable 是 HTML5 中 新 增加 的 属性 ， 其 用 途 是 让 用 户 能 够 修改 页 面 上 的 内 容 。 代 码 
清单 3-18 是 一 个 简单 的 例子 。 


代码 清单 3-18 ”使 用 contenteditable 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p contenteditable="true">It is raining right now</p> 
</body> 
</html> 


此 例 把 contenteditable 属 性 用 在 一 个 p 元 素 ( 在 第 9 章 介绍 ) 身上 。 该 属性 值 设 置 为 true 时 用 
户 可 以 编辑 元 素 内 容 ， 设 置 为 false 时 则 禁止 编辑 。 如 果 未 设 定 其 值 ， 那 么 元 素 会 从 父 元 素 处 继 
承 该 属性 的 值 。 这 个 属性 的 效果 如 图 3-9 所 示 。 用 户 单 击 那 段 文字 后 即 可 开始 编辑 其 内 容 。 
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€ > ÇC Otitan/listings/example.html wit 
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It is E kright now 


It is raining right now 
































图 3-9 ”用 contenteditable 属 性 启用 编辑 功能 








3.5.4 contextmenu 属性 


contextmenu 属 性 用 来 为 元 素 设 定 快 捷 菜 单 。 这 种 菜单 会 在 受到 触发 的 时 候 (例如 ，Windows 
用 户 用 鼠标 右 击 时 ) 弹出 来 。 在 撰写 本 书 的 时 候 ， 尚 无 支持 这 个 属性 的 浏览 
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3.5.5 dir 属性 


dir 属 性 用 来 规定 元 素 中 文字 的 方向 。 其 有 效 值 有 两 个 : ltr〈 用 于 从 左 到 右 的 文字 ) 和 rt1 
(用 于 从 右 到 左 的 文字 )。 在 代码 清单 3-19 中 这 两 个 值 都 用 上 了 。 


代码 清单 3-19 ”使 用 dir 属 性 











<!DOCTYPE HTML> 
<html> 
<head> 





<title>Example</title> 


</head> 
<body> 


«p dir-"rtl'»This is right-to-left</p> 
«p dir-"ltr"»This is left-to-right</p> 


</body> 
</html> 


其 效果 如 图 3-10 所 示 。 





f ae ASIE ejm 
© Example ‘WA í : 
€ - Q |Q titan/listings/example.htm! wit 


^ 





This is right-to-left 


| This is left-to-right 








- 


| 
— 


— = — 


图 3-10 ”从 右 到 左 的 文字 和 从 左 到 右 的 文字 





3.5.6 draggable 属性 


draggable 属 性 是 HTML5 支 持 拖 放 操 作 的 方式 之 一 ， 用 来 表示 元 素 是 否 可 被 拖 放 。 拖 放 操 作 
的 详细 说 明 见 第 37 章 。 








3.5.7 dropzone 属性 
dropzone 属 性 是 HTML5 支 持 拖 放 操 作 的 方式 之 一 ， 与 上 述 draggable 属 性 搭配 使 用 。 二 者 的 





介绍 都 放 到 第 37 章 。 


3.5.8 hidden JB! 





hidden 是 个 布尔 








性 








AVE, 表示 相关 元 素 当 前 组 需 关注 。 浏 览 右 对 它 的 处 理 方式 是 隐藏 相关 元 素 。 





代码 清单 3-20 展 示 了 hidden 属 性 的 效果 。 
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代码 清单 3-20 ”使 用 hidden 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<script> 
var toggleHidden = function() { 
var elem = document.getElementById("toggle"); 
if (elem.hasAttribute("hidden")) { 
elem.removeAttribute("hidden") ; 
} else { 
elem.setAttribute("hidden", "hidden"); 
} 


} 
</script> 
</head> 
<body> 
<button onclick="toggleHidden()">Toggle</button> 
<table> 
<tr><th>Name</th><th>City</th></tr> 
<tr><td>Adam Freeman</td><td>London</td></tr> 
<tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr> 
<tr><td>Anne Jones</td><td>Paris</td></tr> 
</table> 
</body> 
</html> 


这 个 例子 的 复杂 程度 有 点 超标 。 文 档 中 有 一 个 table 元 素 ， 它 包含 的 一 个 tr 元 素 ( 代表 表格 
中 的 一 行 ) 设置 了 hidden 属 性 。 文 档 中 还 有 一 个 putton 元 素 ， 按 下 它 所 代表 的 按钮 将 会 调用 定义 
在 script 元 素 中 的 JavaScript 孙 数 toggleHidden。 这 段 脚本 程序 的 作用 是 :如果 那个 tr 元 素 的 hidden 
届 性 存在 就 将 其 删除 ， 否 则 就 添加 该 属性 。 现 在 没 必要 寻思 其 中 原委 。 第 11 章 会 介绍 table、tr、 
th 和 td 元 素 。script 元 素 和 事件 的 介绍 分 别 安排 在 第 7 章 和 第 30 章 。 

这 里 将 这 些 东 西 烩 作 一 锅 是 为 了 演示 hidden 属 性 的 作用 。 图 3-11 显 示 了 按 下 Toggle 按 钮 的 结果 。 
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图 3-11 ”删除 和 添加 hidden 属 性 的 效果 
把 hidden 属 性 应 用 到 一 个 元 素 之 后 ， 浏 览 需 干 脆 不 去 显示 该 元 素 ， 仿 佛 HTML 文档 中 没有 这 


Lu 


个 元 素 。 所 以 上 面 的 例子 中 所 显示 的 表格 的 行 数 比 实际 的 要 少 ( 应 用 了 hidden 属 性 时 )。 
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3.5.9 id 属性 


id 属性 用 来 给 元 素 分 配 一 个 唯一 的 标识 符 。 这 种 标识 符 通常 用 来 将 样式 应 用 到 元 素 上 或 在 
JavaScript 程 序 中 用 来 选择 元 素 。 代 码 清 单 3-21 示 范 了 如 何 根据 id 属性 值 应 用 样式 。 


代码 清单 3-21 使 用 id 属性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<style> 
#w3clink { 
background: grey; 
color:white; 
padding: 5px; 
border: thin solid black; 



































} 
</style> 
<body> 
<a href="http://apress.com">Apress web site</a> 
<p/> 
«a id="w3clink" href-"http://w3c.org"»W3C web site</a> 
</body> 
</html> 


为 了 根据 id 属性 值 应 用 样式 ， 需 要 在 定义 样式 时 使 用 一 个 以 # 号 开头 后 接 id 属 性 值 的 选择 器 
( selector )。CSS 选 择 器 的 详细 说 明 见 第 17 章 和 第 18 章 。 第 19 章 到 第 24 章 介绍 了 各 种 可 以 使 用 的 样 
式 。 上 例 中 样式 应 用 的 效果 如 图 3-12 所 示 。 
J © Example x Y T i | 
| € > Œ Otitan/listings/example.htmi | X || 














pam) 














Apress web site 


图 3-12 ”根据 元 素 的 id 属性 值 应 用 样式 









































提示 “id 属性 还 可 以 用 来 导航 到 文档 中 的 特定 位 置 。 倘 若 有 个 名 为 example.html 的 文档 中 包含 一 
个 id 属性 值 为 myelement 的 元 素 , 那么 使 用 example.html#myelement 这 个 URL 即 可 直接 导航 
至 该 元 素 。 该 URL 的 末尾 部 分 (# 加 上 元 素 id 值 ) 称 为 URL 片 段 标识 符 ( fragment identifier ). 
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3.5.10 lang 属性 
lang 属 性 用 于 说 明 元 素 内 容 使 用 的 语言 。 代 码 清单 3-22 示 范 了 其 用 法 。 
代码 清单 3-22 ”使 用 lang 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<p lang="en">Hello - how are you?</p> 
«p lang="fr">Bonjour - comment étes-vous?«/p» 
«p lang-"es"»Hola - ;cómo estás?«/p» 
</body> 
</html> 


lang 属 性 值 必须 使 用 有 效 的 ISO 语言 代码 。 关 于 如 何 声 明 语 言 的 全 面 说 明 可 参阅 这 个 网 址 : 
http://tools.ietf.org/html/bcp47。 不 过 要 注意 ,语言 是 个 复杂 的 技术 性 问题 。 
使 用 1ang 属 性 的 目的 是 让 浏览 器 调整 其 表达 元 素 内 容 的 方式 。 比 如 说 ,改变 使 用 的 引号 , 在 
使 用 了 文字 朗读 器 (或 别 的 残障 辅助 技术 ) 的 情况 下 正确 发 音 。 

lang 属 性 还 可 以 用 来 选择 指定 语言 的 内 容 ， 以 便 只 显示 用 户 所 选 语言 的 内 容 或 对 其 应 用 
样式 。 









































3.5.11 spellcheck 属性 





spellcheck 属 性 用 来 表明 浏览 需 是 否 应 该 对 元 素 的 内 容 进行 拼写 检查 。 这 个 属性 只 有 用 在 
用 户 可 以 编辑 的 元 素 上 时 才 有 意义 。 代 码 清单 3-23 就 是 一 例 ， 例 中 的 textarea 元 素 的 介绍 见 
第 14 章 。 














代码 清单 3-23 ”使 用 spellcheck 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<textarea spellcheck="true">This is some mispelled text</textarea> 
</body> 
</html> 


spellcheck 属 性 可 以 接受 的 值 有 两 个 : true ( 启用 拼写 检查 ) 和 false ( 禁用 拼写 检查 )。 至 
于 拼写 检查 的 实现 方式 则 因 浏 览 器 而 异 。 图 3-13 所 示 为 谷歌 的 Chrome 的 处 理 方式 , 即 键入 时 检查 
拼写 。 其 他 浏览 器 则 需要 用 户 发 出 检查 拼写 的 指示 。 
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This is some mispelled text 





图 3-13 ”Chrome 中 的 拼写 检查 








警告 目前 大 多 数 流行 浏览 器 中 的 拼写 检查 都 会 忽略 前 面 介 绍 过 的 1ang 属 性 。 它 们 的 拼写 检查 


基于 用 户 所 用 操作 系统 中 的 语言 设置 或 浏览 器 的 语言 设置 。 


3.5.12 style 属性 


style 属 性 用 来 直接 在 元 素 身 上 定义 CSS 样 式 ( 
外 的 一 种 选择 )。 代 码 清单 3-24 示 范 了 其 用 法 。 




















这 是 在 style 元 素 或 外 部 样式 表 中 定义 样式 之 








代码 清单 3-24 ”使 用 style 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 


<body> 
«a href-"http://apress.com" style-"background: grey; color:white; padding:10px"> 


Visit the Apress site 
</a> 
</body> 
</html> 


第 5 章 会 对 CSS 作 更 多 说 明 。 第 19 章 到 第 24 章 将 介绍 各 种 可 用 的 样式 选 





3.5.13 tabindex 属性 








HTML 页 面 上 的 键盘 焦点 可 以 通过 按 Tab 键 在 各 元 素 之 间 切 换 。 用 tabindex 属 性 可 以 改变 默认 


的 转移 顺序 。 代 码 清单 3-25 示 范 了 其 用 法 。 
代码 清单 3-25 ”使 用 tabindex 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 


</head> 
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<body> 
<form> 
<label>Name: <input type="text" name="name" tabindex="1"/></label> 


<p/> 
<label>City: <input type="text" name="city" tabindex="-1"/></label> 


</p> 
<label>Country: <input type="text" name="country" tabindex="2"/></label> E] 


</p> 
<input type="submit" tabindex="3"/> 
</form> 
</body> 
</html> 


tabindex 值 为 1 的 元 素 会 第 一 个 被 选中 。 用 户 按 一 下 Tab 键 后 , tabindex 值 为 2 的 那个 元 素 会 被 
选中 , 依次 类 推 。tabindex 设 置 为 -1 的 元 素 不 会 在 用 户 按 下 Tab 键 后 被 选中 。 上 面 示例 中 的 tabindex 
设置 的 效果 是 : 在 按 Tab 键 的 过 程 中 , 键盘 焦点 从 第 一 个 input 元 素 转 到 第 三 个 , 然后 又 转 到 Submit 
按钮 ， 如 图 3-14 所 示 。 
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图 3-14 ”用 tabindex 属 性 控制 焦点 转移 顺序 

















3.5.14 title 属性 
title 属 性 提供 了 元 素 的 额外 信息 。 浏览 带 通 常用 这 些 东西 显示 工具 提示 。 代码 清单 3-26 示 范 


了 该 属性 的 用 法 。 
代码 清单 3-26 使 用 title 属 性 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<a title="Apress Publishing" href="http://apress.com">Visit the Apress site</a> 
</body> 
</html> 


图 3-15 显 示 了 Chrome 使 用 这 个 属性 值 的 方式 。 
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图 3-15 ”显示 为 工具 提示 的 title 属 性 值 








3.6 ”有 用 的 HTML 工具 


跟 HTMIL 打 交道 时 我 认为 有 帮助 的 工具 有 两 种 。 第 一 种 是 一 款 优秀 的 HTML 编辑 软件 。 它 应 
该 能 够 将 无 效 元 素 和 属性 突出 显示 出 来 ， 保 证 你 不 会 犯 低 级 错误 。 我 在 第 2 章 曾 经 提 到 自己 比较 
喜欢 Komodo Edit。 不 过 既然 有 那么 多 编辑 器 可 供 选 择 ， 你 肯定 可 以 找到 一 款 适 合 自己 的 〈 请 确 
认 它 支持 HTMLS )。 

男 一 种 工具 是 大 多 数 浏览 器 菜单 中 都 有 的 “查看 源 代码 ”。 查 看 文档 源 代码 是 验证 自己 的 工 
作 和 跟 别 人 学 习 新 技术 的 重要 方式 。 



























































3.7 小 结 


本 章 跑 马 观 花 地 介绍 了 HTML 文 档 的 结构 和 特性 ， 示 范 了 如 何 用 HTML 元 素 标 记 内 容 以 创建 
一 个 HTML 文档 。 读 者 可 以 了 解 到 如 何 使 用 属性 配置 浏览 器 处 理 元 素 的 方式 ， 以 及 局 部 和 全 局 属 
性 的 差别 。 本 章 还 逐一 介绍 了 所 有 全 局 属性 ,并 且 简 要 说 明了 用 以 标记 HTML 文 档 的 基本 元 素 和 
结构 。 























初探 CSS 











CSS (EUEEEEXUCR ) 用 来 规定 HTML 文 档 的 呈现 形式 ( 外观 和 格式 编排 )。 本 章 将 说 明 如 何 
创建 和 应 用 CSS 样 式 ， 解 释 层 县 样式 表 这 个 名 称 的 由 来 ,为 后 续 章 节 打下 基础 。 表 4-1 概 括 了 本 
ALA 














R41 本章 内 容 概要 






















































































































































































ig — 8 解决 方案 代码 清单 
定义 样式 使 用 属性 / 值 声明 4-1 
将 样式 直接 应 用 于 元 素 用 style 属 性 创建 元 素 内 内 样式 di 
创建 可 用 于 多 个 元 素 的 样式 使 用 style 元 素 , 编写 一 个 选择 器 和 一 组 样式 声明 4-3, 4-4 
创建 可 用 于 多 个 HTMIL 文档 的 样式 创建 一 个 外 部 样式 表 文 件 , 并 用 1link 元 素 引 用 它 。 4-5 ~ 4-9 
确定 元 素 将 使 用 什么 样式 属性 对 样式 来 源 适 用 层 琶 规则 ， 同 级 样式 发 生 冲 窗 。” 4-10~4-12、4-14~ 4-16 
时 计算 并 比较 样式 的 具体 程度 
WE W ARERR 使 用 重要 样式 4-13 
使 用 父 元 素 的 样式 属性 使 用 属性 继承 4-17、4-18 
根据 一 条 属性 确定 另 一 条 属性 的 值 使 用 相对 度量 单位 4-19 ~ 4-23 
动态 计算 属性 值 使 用 calc 函 数 4-24 




















4.1 定义 和 应 用 样式 


CSS 样 式 由 一 条 或 多 条 以 分 号 隔 开 的 样式 声明 组 成 。 每 条 声明 包含 着 一 个 CSS 属 性 和 该 属性 
的 值 ， 二 者 以 冒号 分 隔 。 代 码 清单 4-1 所 示 为 一 条 简单 的 CSS 样 式 。 
代码 清单 4-1 一 条 简单 的 CSS 样 式 

background-color:grey; color:white 


图 4-1 指 出 了 这 个 样式 中 的 样式 声明 、 属 性 和 值 。 
































D 这 个 表 中 只 有 这 一 个 “属性 ” 指 HTML 中 元 素 的 属性 , 与 此 对 应 的 英文 单词 为 attribute。 表 中 其 他 “属性 ” 均 指 CSS 
属性 ， 对 应 的 英文 单词 为 property。 一 般 情况 下 二 者 不 会 混淆 ， 故 本 书 中 文 译 法 未 作 区 分 。 译 者 注 
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background-color:grey 




















图 4-1 CSS 样式 剖析 




















本 例 中 的 样式 含有 两 条 样式 声明 。 第 一 条 将 background-color 属 性 的 值 设置 为 grey， 第 二 条 
将 color 属 性 的 值 设置 为 white。 
CSS 属 性 花样 繁多 ， 每 种 属性 都 控制 着 其 应 用 元 素 某 方面 的 外 观 。 本 书 第 19 章 到 第 24 章 将 介 


























绍 可 用 的 CSS 属 性 并 展示 其 效果 。 


4.1.1 了 解 本 章 所 用 的 CSS 属性 








为 了 说 明 CSS 的 工作 方式 ,本章 需要 用 到 一 些 后 面 音 节 中 才 会 详细 介绍 的 CSS 











出 了 这 些 属 性 及 其 简要 说 明 ， 还 有 其 详细 介绍 所 在 章 的 编号 。 


#4-2 CSS 属性 摘要 
























































E 性 iH 所 在 
background-color 设置 元 素 的 背景 颜色 1 
border 设 定 围绕 元 素 的 边框 
color 设置 元 素 的 前 景 颜色 全 
font-size 设置 元 素 文字 的 字号 x 
height 设置 元 素 高 度 人 
padding 设 定 元 素 内 容 与 边框 之 间 的 间距 20 
text-decoration 设置 元 素 文字 的 装饰 效果 ， 如 本 章 用 到 的 下 划 线 22 
width 设置 元 素 宽 度 a 


41.2 ”使 用 元 素 内 散 样 式 
样式 不 是 定义 了 就 了 事 ， 它 还 需要 被 应 用 























也 即 告诉 浏览 右 它 要 影响 哪些 元 素 。 把 样式 应 用 


到 元 素 身上 的 各 种 方式 中 ， 最 直接 的 是 使 用 全 局 属性 style， 如 代码 清单 4-2 所 示 。 





代码 清单 4-2 用 全 局 属性 style 定 义 样式 


<!DOCTYPE HTML> 
<html> 
<head> 


属性 。 表 4-2 列 
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<title>Example</title> 


</head> 
<body> 
<a href="http://apress.com" style="background-color:grey; color:white"> 
Visit the Apress website 
</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


这 个 HTML 文档 中 有 4 个 内 容 元 素 : 两 个 超 链接 ( 用 a 元 素 生成 )， 一 个 p 元 素 以 及 包含 在 其 
的 一 个 span 元 素 ( 第 8 章 和 第 9 章 会 详细 介绍 a、p 和 span 这 三 个 元 素 。 此 处 关注 的 只 是 如 何 应 用 样 
式 )。 例 中 用 全 局 属性 style 将 样式 应 用 到 第 一 个 a 元 素 ( 链接 到 Apress 网 站 )。style 属 性 只 影响 它 
所 属 的 元 素 ， 如 图 4-2 所 示 。 
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I like apples and oranges. 
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图 4-2 ”将 样式 直接 应 用 于 元 素 


从 图 中 可 以 看 出 上 例 所 用 两 个 CSS 属 性 的 作用 。background-color 属 性 和 color 属 性 分 别 设置 
元 素 的 背景 和 前 景 颜色 。HTML 文 档 中 的 男 外 三 个 内 容 元 素 未 受 该 样式 的 影响 。 


关于 CSS 教 


CSS 话 题 对 狂热 分 子 似 乎 很 有 吸引 力 。 在 网 上 随便 看 场 关于 如 何 用 CSS 实 现 某 种 效果 的 讨 
je, 很 快 就 会 见 到 有 人 争执 什么 才 是 正确 的 方法 。 我 可 没 工夫 联 喷 喷 这 些 东 西 的 人 磨 。 对 于 任 
何 问题 ， 其 唯一 正确 的 解决 方法 就 是 利用 已 有 知识 和 工具 为 尽 可 能 多 的 用 户 提 供 支 持 。 策 蛋 才 
会 为 完美 的 CSS 方 案 纠缠 不 休 。 我 的 建议 是 : 别管 这 些 争论 , 琢磨 点 适合 自己 的 技术 和 招 法 ( 只 
要 确 有 其 效 而 且 对 自己 口味 就 行 ) 才 是 正事 。 

































































4.1.3 fe SHAR 


直接 对 元 素 应 用 样式 有 它 的 用 处 ， 但 是 对 于 可 能 大 量 需 要 各 种 样式 的 复杂 文档 来 说 就 显得 缺乏 
效率 。 这 样 做 不 仅 需要 逐个 元 素 设 好 样式 ， 而 且 软 件 更 新 时 还 不 得 不 逐个 元 素 仔 细 搞 好 样式 调整 ， 
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很 容易 出 错 。 我 们 可 以 换 种 方法 ， 用 style 元 素 〈 而 不 是 style 属 性 ) 定义 文档 内 机 样 式 ， 通 过 CSS 选 
择 髓 指示 浏览 器 应 用 样式 ,代码 清单 4-3 示 范 了 style 元 素 的 用 法 ,该 例 中 用 ds A 


代码 清单 4-3 ”使 用 style 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
af 
background-color: grey; 
color:white 


</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


style 元 素 及 其 属性 将 在 第 7 章 介绍 。 本 章 关注 的 是 如 何在 style 元 素 中 定义 样式 。 此 例 所 示 做 法 
也 要 用 到 CSS 声 明 ， 只 不 过 它们 被 包 在 一 对 花 括号 之 间 ， 并 且 跟 在 一 个 选择 器 之 后 。 如 图 4-3 所 示 。 


<style type="text/css"> 

















选择 器 一 | a |{ 














background-color: grey; ET 
: 一 一 一 声明 
color:white 











</style> 
图 4-3 ”定义 在 style 元 素 之 内 的 样式 剖析 


本 例 中 的 选择 器 为 3， 它 指示 浏览 咒 将 样式 应 用 到 文档 中 的 每 一 个 a 元 素 。 图 4-4 所 示 为 浏览 
需 的 处 理 结 














í Welais 
© Example x We» 
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isit the Apress website! 


I like apples and oranges. 


isit the W3C website! 

















图 4-4 ”选择 器 a 的 效果 
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一 个 style 元 素 中 可 以 定义 多 条 样式 ， 为 此 只 消 不 断 重 复 定义 一 个 选择 器 和 一 套 样式 声明 的 
过 程 即 可 。 代 码 清单 4-4 所 示 为 一 个 具有 两 条 样式 定义 的 style 元 素 。 


代码 清单 4-4 ”在 一 个 style 元 素 内 定义 多 条 样式 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
a { 
background-color: grey; 
color:white 





} 
span { 
border: thin black solid; 
padding: 10px; 
</style> 
</head> 
<body> 


<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


本 例 新 增 样式 的 选择 器 为 span (RIRA ae ERE Un BISCO PTA spant R E, KWH 
border 和 padding 属 性 所 规定 的 效果 )。border 属 性 设置 的 是 围绕 目标 元 素 的 边框 ，padding 属 性 控 
制 的 则 是 目标 元 素 与 边框 之 间 的 间距 ， 其 效果 如 图 4-5 所 示 。 这 些 例 子 中 的 选择 器 和 样式 属性 都 
很 简单 。 选 择 顺和 样式 属性 的 全 面 介绍 分 别 安排 在 第 17 章 、 第 18 章 和 第 19 章 、 第 20 章 。 
p Eram) 

y © Example x \ ap 
€ - C © titan/listings/example.htm! Ww q | 
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I like | apples | and oranges 


lisit the W3C website} 
























































图 4-5 ”应 用 多 条 样式 





4.1.4 使 用 外 部 样式 表 


如 果 有 一 套 样式 要 用 于 多 个 HTMI 文 档 , 那么 与 其 在 每 一 个 文档 中 重复 定义 相同 的 样式 , 不 
如 另外 创建 一 个 独立 的 样式 表 文 件 。 这 种 文件 按 惯例 以 .css 为 文件 扩展 名 ， 其 中 包含 着 用 户 的 样 
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式 定义 。 代 码 清单 4-$ 所 示 为 文件 styles.css 的 内 容 。 


代码 清单 4-5 ”文件 styles.css 
a { 


background-color: grey; 
color:white 

} 

span { 
border: thin black solid; 
padding: 10px; 





样式 表 中 用 不 着 style 元 素 ， 需 要 什么 样式 ， 只 需要 为 其 设计 好 选择 器 ， 后 面 再 跟 上 一 套 样 
式 声明 即 可 。 然后 HTML 文 档 就 可 以 用 link 元 素 将 这 些 样式 导入 其 中 (1ink 元 素 将 在 第 7 章 详细 介 
绍 )。 如 代码 清单 4-6 所 示 。 


代码 清单 4-6 ”导入 外 部 样式 表 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<link rel="stylesheet" type="text/css" href="styles.css"></link> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


文档 想 要 链接 多 少 样式 表 都 行 ,为 每 个 样式 表 使 用 一 个 Link 元 素 即 可 。 如 果 不 同样 式 表 中 的 
样式 使 用 了 相同 的 选择 器 , 那么 这 些 样 式 表 的 导入 顺序 很 重要 , 在 此 情况 下 得 以 应 用 的 是 后 导入 
的 样式 。 

1. 从 其 他 样式 表 中 导入 样式 

可 以 用 @import 语 句 将 样式 从 一 个 样式 表 导 和 人 另 一 个 样式 表 。 代 码 清单 4-7 所 示 的 样式 表 
combined.css 示 范 了 这 种 用 法 。 


代码 清单 4-7 文件 combined.css 


@import "styles.css"; 

span { 
border: medium black dashed; 
padding: 10px; 



































一 个 样式 表 中 想 要 导入 多 少 别 的 样式 表 都 行 ， 为 每 个 样式 表 使 用 一 条 @import 语 句 即 可 。 
@import 语 句 必 须 位 于 样式 表 顶 端 ， 样 式 表 自已 的 样式 定义 不 能 出 现在 它 之 前 。 在 combined.css 这 
个 样式 表 中 ,先导 和 人 了 styles.css， 然 后 再 定义 了 一 条 针对 span 元 素 的 新 样式 。 代 码 清单 4-8 显 示 了 
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HTML 文档 链接 combined.css 样 式 表 的 情形 。 
代码 清单 4-8 ”链接 到 一 个 包含 有 导入 语句 的 样式 表 


<!DOCTYPE HTML> 
«html» 
«head» 
«title»Example«/title» 
«link rel-"stylesheet" type-"text/css" href-"combined.css"/» 
«/head» 
«body» 
«a href-"http://apress.com"»Visit the Apress website«/a» 
<p>I like <span>apples</span> and oranges.</p> 
<a href-"http://w3c.org"»Visit the W3C website</a> 
</body> 
</html> 


combined.css 中 的 @import 语 句 导 入 了 styles.css 中 定义 的 两 条 样式 ， 其 中 应 用 于 span 元 素 的 那 
条 样式 又 被 combined.css 中 定义 的 具有 相同 选择 器 的 样式 盖 过 。 其 效果 见 图 4-6。 
© Example Ye , 
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图 4-6 ”从 其 他 样式 表 中 导入 样式 


@import 语 句 用 得 并 不 广泛 。 其 中 一 个 原因 是 不 少 人 并 不 知道 有 这 个 东西 。 男 一 个 原因 则 是 浏览 
带 处 理 @import 语 句 的 效率 往往 不 如 处 理 多 个 1ink 元 素 并 靠 样 式 层 钱 (下 节 就 会 介绍 ) 解决 问题 。 

2. 声明 样式 表 的 字符 编码 

在 CSS 样 式 表 中 可 以 出 现在 @import 请 句 之 前 的 只 有 @charset 语 句 。 后 者 用 于 声明 样式 表 使 用 
的 字符 编码 。 代 码 清单 4-9 示 范 了 如 何 表示 样式 表 使 用 的 是 UTF-8 编 码 ( 这 是 最 常见 的 编码 )。 


代码 清单 4-9 声明 样式 表 使 用 的 字符 编码 类 型 


@charset "UTF-8"; 

@import "styles.css"; 

span { 
border: medium black dashed; 
padding: 10px; 


















































如 果 样 式 表 中 未 声明 所 使 用 的 字符 编码 , IAN ve a ee A TRESS HTML 34 3 BH 
的 编码 。 要 是 HTML 文 档 也 没有 声明 其 编码 ， 那 么 默认 情况 下 使 用 的 将 是 UTF-8。 
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4.2 ”样式 的 层 荆 和 继承 


要 想 掌 握 样 式 表 , 弄 清 样 式 层 琶 和 继承 这 两 个 概念 是 关键 。 浏 览 需 根据 层 琶 和 继承 规则 确定 
显示 一 个 元 素 时 各 种 样式 属性 采用 的 值 。 每 个 元 素 都 有 一 套 浏览 器 呈现 页 面 时 要 用 到 的 CSS 属 
性 。 对 于 每 一 个 这 种 属性 ,浏览 器 都 需要 查看 一 下 其 所 有 的 样式 来 源 。 前 面 已 经 讲 过 三 种 定义 样 
式 的 方式 〈 元 素 内 藤 、 文 档 内 骨 和 外 部 样式 表 )， 但 是 要 知道 ， 样 式 还 有 另外 两 个 来 源 。 


4.2.1 浏览 器 样式 
浏览 器 样式 ( 更 恰当 的 名 称 是 用 户 代理 样式 ) 是 元 素 尚未 设置 样式 时 浏览 器 应 用 在 它 身上 的 默 


认 样 式 。 这 些 样式 因 浏览 器 而 略 有 差异 ， 不 过 大 体 一 致 。 以 a 元 素 〈 超 链 接 ) 为 例 ， 想 想 没 有 特别 
为 它 定义 样式 时 浏览 器 会 怎样 显示 。 代 码 清单 4-10 所 示 为 一 个 不 含 任何 样式 的 简单 HTML SCP 


代码 清单 4-10 不 含 样式 的 HTML 文档 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


该 例 只 是 在 前 面 例子 的 基础 上 做 了 一 点 改动 ， 去 掉 了 所 有 样式 。 从 图 4-7 中 可 以 看 到 浏览 
是 如 何 显示 a 元 素 的 。 
j © Example Us 
€ Œ | Q titan/listings/example.htm 1 A 


































































































Visit the Apress website 


| I like apples and oranges. 





Visit the W3C website | 


图 4-7 ” 超 链 接 元 素 的 默认 样式 


我 们 对 浏览 器 应 用 于 链接 的 样式 早已 习以为常 ,以 至 于 不 会 留意 到 它 的 存在 。 但 是 只 要 驻 目 
细 看 ， 样 式 的 细节 就 会 浮现 出 来 。 链 接 的 文字 内 容 被 显示 为 蓝 色 ， 而 且 带 有 下 划 线 。 据 此 推测 ， 
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浏览 器 相当 于 应 用 了 类 似 代码 清单 4-11 所 示 的 样式 。 
代码 清单 4-11 推测 出 来 的 a 元 素 的 默认 浏览 器 样式 
a { 


color: blue; 
text-decoration: underline; 


} 
EIR AS Fe BE — “SHTML 元素 都 有 默认 的 浏览 器 样式 ， 但 是 多 数 元 素 都 有 。 本 书 介绍 HTML 元 
素 的 各 章 都 会 介绍 常见 浏览 器 一 般 都 会 应 用 的 典型 默认 样式 。 关 于 a 元 素 的 介绍 参见 第 8 章 。 











4.2.2 用 户 样式 


大 多 数 浏 览 句 都 允许 用 户 定 义 自 己 的 样式 表 。 这 类 样式 表 中 包含 的 样式 称 为 用 户 样式 。 这 个 
功能 用 的 人 不 多 , 不 过 ,那些 要 定义 自己 的 样式 表 的 人 往往 比较 看 重 这 一 点 , 一 个 特别 的 原因 是 
这 可 以 让 有 生理 不 便 的 人 更 容易 使 用 网 页 。 

各 种 浏览 器 都 有 自己 管理 用 户 样 式 的 方式 。 以 谷歌 的 Chrome 为 例 ， 它 会 在 用 户 的 个 人 配置 
信息 目录 中 生成 一 个 名 为 Default\User StyleSheets\Custom.css 的 文件 。 添加 到 这 个 文件 中 的 任何 样 
式 都 会 被 用 于 用 户 访 问 的 所 有 网 站 ， 只 不 过 要 依 下 节 所 讲 的 层 又 规则 行事 。 代 码 清单 4-12 所 示 简 
例 展示 了 我 在 自己 的 Custom.css 文 件 中 加 入 的 一 条 样式 。 


代码 清单 4-12 ”在 用 户 样式 表 中 添加 样式 














at 
color: white; 
background:grey; 
text-decoration: none; 
padding: 2px; 

} 





这 条 样式 的 作用 对 象 是 3 元素 ， 它 盖 过 了 默认 的 浏览 器 样式 。 图 4-8 显 示 了 重新 载 人 代码 清 
单 4-10 中 的 HTML 文 档 后 上 述 用 户 样式 的 效果 。 
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Visit the Apress website 
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图 4-8 定义 用 户 样式 
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4.2.3 Ames 


明白 了 浏览 器 所 要 查看 的 所 有 样式 来 源 之 后 ， 现 在 可 以 看 看 浏览 器 要 显示 元 素 时 求索 一 个 
CSS 属 性 值 的 次 序 。 这 个 次 序 很 明确 : 

(1) 元 素 内 骨 样 式 ( 用 元 素 的 全 局 属性 style 定 义 的 样式 ); 

(2) 文档 内 山 样 式 (定义 在 style 元 素 中 的 样式 ); 

(3) 外 部 样式 (用 link 元 素 导 入 的 样式 ); 

(4) 用 户 样式 〈 用 户 定 义 的 样式 ); 

(5) 浏览 器 样式 〈 浏览 器 应 用 的 默认 样式 )。 

设想 用 户 需要 显示 一 个 a 元 素 。 浏 览 器 需要 知道 的 一 件 事 情 是 其 文字 应 显示 为 哪 种 颜色 。 为 
了 解决 这 个 问题 , 它 需要 为 CSS 属 性 color 找 到 一 个 值 。 首先 它 会 查看 所 要 呈现 的 那个 元 素 是 否 具 
有 一 条 设 定 了 color 值 的 元 素 内 髓 样式 。 比 如 下 面 这 种 : 

<a style="color: red" href="http://apress.com">Visit the Apress website</a> 

WRAFETEICR AES, WARE Pole Uds A eA TP style BL AE THB 
个 元 素 的 样式 。 比 如 下 面 这 种 : 


<style type="text/css"> 
a { 
color: red; 








































































































</style> 

如 果 不 存在 这 样 的 style 元 素 ， 那 么 浏览 器 接 下 来 会 查看 用 link 元 素 载 和 人 的 样式 表 。 依 次 类 
推 ， 直 到 找到 一 个 color 属 性 值 或 查 完 用 户 定 义 样式 。 在 后 面 一 种 情况 下 ， 最 终 使 用 的 将 是 浏览 
器 默认 样式 中 的 值 。 

前 述 次 序 表 中 的 前 三 个 属性 来 源 (元 素 内 舱 样 式 、 文 档 内 齿 样 式 和 外 部 样式 表 ) 合 称 作 者 样 
式 。 定 义 在 用 户 样式 表 中 的 样式 称 为 用 户 样式 。 由 浏览 器 定义 的 样式 则 称 为 浏览 器 样式 。 


4.2.4 ”用 重要 样式 调整 层 茎 次 序 
把 样式 属性 值 标记 为 重要 (important )， 可 以 改变 正常 的 层 闭 次 序 ， 如 代码 清单 4-13 所 示 。 
代码 清单 4-13 ”将 样式 属性 标记 为 重要 


<!DOCTYPE HTML» 
«html» 

«head» 
<title>Example</title> 
<style type="text/css"> 

a 












































I 





























color: black !important; 


</style> 
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</head> 
<body> 
<a style-"color:red" href-"http://apress.com"»Visit the Apress website</a> 


<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


在 样式 声明 后 附 上 !important 即 可 将 对 应 属性 值 标 记 为 重要 。 不管 这 种 样式 属性 定义 在 什么 
地 方 ， 浏览 絮 都 会 给 予 优先 考虑 。 从 图 4-9 中 可 以 看 到 重要 属性 的 效果 ( 印刷 页 面 上 看 起 来 可 能 
不 太 清 楚 )。 此 例 中 文档 内 符 样 式 的 color 属 性 值 盖 过 了 元 素 内 艇 样式 中 的 值 。 
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I like apples and oranges. 
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提示 “能 凌驾 于 作者 定义 的 重要 属性 值 之 上 的 只 有 用 户 样 式 表 中 定义 的 重要 属性 值 。 对 于 普通 
属性 ， 作 者 样式 中 的 值 优先 于 用 户 样 式 中 的 值 ， 而 对 于 重要 属性 情况 正好 相反 。 


4.2.5 根据 具体 程度 和 定义 次 序 解决 同 级 样式 冲突 


如 果 有 两 条 定义 于 同一 层次 的 样式 都 能 应 用 于 同一 个 元 素 ， 而 且 它 们 都 包含 着 浏览 器 要 查 
看 的 CSS 属 性 值 ， 这 时 就 需要 另 加 夸 码 助 天 平 上 持平 的 双方 一 决 高 下 。 为 了 判断 该 用 哪个 值 ， 
浏览 器 会 评估 两 条 样式 的 具体 程度 ， 然 后 选中 较为 特殊 的 那 条 。 样 式 的 具体 程度 通过 统计 三 类 
特征 得 出 : 

(1) 样式 的 选择 器 中 id 值 的 数目 ; 

(2) 选择 器 中 其 他 属性 和 伪 类 的 数目 ; 

(3) 选择 器 中 元 素 名 和 伪 元 素 的 数目 。 

第 17 章 和 第 18 章 将 会 说 明 如 何 编写 包含 所 有 这 些 特征 的 选择 器 。 浏览 器 将 三 类 评估 所 得 值 结 
合 起 来 , 由 此 辨识 出 最 特殊 的 样式 并 采用 其 属性 值 。 代 码 清单 4-14 是 有 关 具 体 程度 的 一 个 非常 简 
单 的 例子 。 
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代码 清单 4-14 ”样式 的 具体 程度 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
af{ 


color: black; 


a.myclass { 
color:white; 
background: grey; 


} 
</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a class="myclass" href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


在 评定 具体 程度 时 要 按 a-b-c 的 形式 〈 其 中 每 一 个 字母 依次 代表 上 述 三 类 特征 的 统计 结果 ) 
生成 一 个 数字 。 它 不 是 一 个 三 位 数 。 如 果 对 某 个 样式 算出 的 a 值 最 大 ， 那 么 它 就 是 具体 程度 高 
的 那个 。 只 有 a 值 相等 时 浏览 器 才 会 比较 b 值 ， 此 时 b 值 较 大 的 样式 具体 程度 更 更 高 。 只 有 a 值 和 b 
值 都 分 别 相等 时 浏览 嚣 才 会 考虑 c 值 。 也 就 是 说 ，1-0-0 这 个 得 分 比 0-5-5 这 个 得 分 代表 的 具体 程 
度 更 高 。 

本 例 中 a.myclass 这 个 选择 器 含有 一 个 class 属 性 ， 于 是 该 样式 的 值 为 0-1-0( 0 个 id 值 +1 个 其 
他 属性 +0 个 元 素 名 ), 男 一 条 样式 的 具体 程度 值 为 0-0-0( 因为 它 不 包含 id 值 、 其 他 属性 或 元 素 名 )。 
因此 浏览 器 在 呈现 被 归 人 myclass 类 的 a 元 素 时 将 使 用 a.myclass 样 式 中 设 定 的 color 属 性 值 。 对 于 
所 有 其 他 a 元 素 ， 使 用 的 则 是 另 一 条 样式 中 设 定 的 值 。 从 图 4-10 可 以 看 出 在 本 例 中 浏览 器 是 如 何 
选择 和 应 用 样式 的 。 
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图 4-10 ”根据 具体 程度 选用 样式 属性 值 
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如 果 同 一 个 样式 属性 出 现在 具体 程度 相当 的 几 条 样式 中 , 那么 浏览 器 会 根据 其 位 置 的 先后 选 
择 所 用 的 值 ， 规 则 是 后 来 者 居 上 。 代 码 清 单 4-15 所 示例 子 就 包含 了 两 条 有 具体 程度 相同 的 样式 。 


代码 清单 4-15 具体 程度 相同 的 样式 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
a.myclass1 { 
color: black; 
} 
a.myclass2 { 
color:white; 
background: grey; 








} 
</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


此 例 style 元 素 中 定义 的 两 条 样式 在 具体 程度 上 得 分 相同 。 浏 览 器 在 呈现 页 面 上 的 第 二 个 a 元 
素 时 ， 为 样式 属性 color 选 用 的 值 是 white， 这 是 因为 该 值 来 自 靠 后 的 那 条 样式 。 其 结果 如 图 4-11 
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| Visit the Apress website 
I like apples and oranges. | 
isit the W3C website 
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图 4-11 根据 样式 定义 的 先后 选择 属性 值 
为 了 证 实 浏览 器 是 用 这 个 方法 选择 所 用 的 color 属 性 值 ， 代 码 清单 4-16 中 的 例子 颠倒 了 两 条 
样式 的 位 置 。 
代码 清单 4-16 BURRS SCARE 


«IDOCTYPE HTML» 
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<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
a.myclass2 { 
color:white; 
background: grey; 


a.myclass1 { 
color: black; 


</style> 
</head> 
<body> 


<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 


</body> 
</html> 


不 出 所 料 ， 现 在 浏览 器 为 color 属 性 选择 的 是 black 这 个 值 ， 如 图 4-12 所 示 。 
j Q Example \ iP 
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图 4-12 ”改变 样式 定义 次 序 的 效果 





«a class-"myclassi myclass2" href="http://w3c.org">Visit the W3C website</a> 


根据 样式 的 具体 程度 和 定义 次 序 确定 选用 的 样式 属性 值 , IE BEIT SB AST AY 
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几 个 例子 还 定义 了 背景 颜色 属性 的 值 。 因 为 该 值 并 非 两 个 样式 中 都 有 ,所 以 不 会 发 生 冲 突 , 也 就 


没有 必要 查找 其 他 值 。 


4.2.6 ”继承 








如 果 浏 览 器 在 直接 相关 的 样式 中 找 不 到 某 个 属性 的 值 ， 就 会 求助 于 继承 机 制 ,使 用 父 元 素 的 








这 个 样式 属性 值 。 如 代码 清单 4-17 所 示 。 
代码 清单 4-17 ”CSS 属性 继承 


<!DOCTYPE HTML> 
<html> 
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<head> 
<title>Example</title> 
<style type="text/css"> 
p { 
color:white; 
background:grey; 
border: medium solid black; 


</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


本 例 关注 的 是 浏览 器 应 用 于 span 元 素 ( 其 父 元 素 为 p ) 的 样式 。 图 4-13 是 这 个 文档 在 浏览 
中 的 显示 效果 。 
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Visit the Apress website 


I like apples and oranges. 


Visit the W3C website 























图 4-13 ”使 用 继承 的 CSS 属 性 值 


这 个 文档 并 没有 在 针对 span 元 素 的 样式 中 设 定 color 属 性 值 ， 但 是 浏览 器 显示 该 元 素 的 文字 
内 容 时 却 使 用 了 前 景色 white。 这 个 值 系 由 父 元 素 p 继 承 而 来 。 

令 人 挠 头 的 是 ， 并 非 所 有 CSS 属 性 均 可 继承 。 这 方面 有 条 经 验 可 供 参 考 : 与 元 素 外 观 (文字 
颜色 、 字 体 等 ) 相关 的 样式 会 被 继承 ; 与 元 素 在 页 面 上 的 布局 相关 的 样式 不 会 被 继承 。 在 样式 中 
使 用 inherit 这 个 特别 设立 的 值 可 以 强行 实施 继承 ， 明 确 指示 浏览 器 在 该 属性 上 使 用 父 元 素 样式 
中 的 值 。 代 码 清 单 4-18 示 范 了 inherit 的 用 法 。 


代码 清单 4-18 ”使 用 inherit 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
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<style type="text/css"> 
pt 
color:white; 
background:grey; 
border: medium solid black; 
} 
span { 
border: inherit; 
} 


</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


此 例 定义 了 一 条 用 于 span 元 素 的 样式 ， 其 border 属 性 值 继承 自 父 元 素 。 文 档 的 显示 效果 见 
图 4-14。 现 在 span 元 素 和 包含 它 的 p 元 素 均 具有 边框 。 
f lelak) 
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图 4-14 ”使 用 inherit 





4.3 CSS 中 的 颜色 


颜色 在 网 页 中 的 作用 非常 重要 。 在 CSS 中 设置 颜色 有 好 几 种 方法 。 最 简单 的 办 法 是 使 用 规定 
的 颜色 名 称 , 或 者 设置 红 、 绿 、 蓝 三 种 颜色 成 分 的 值 ( 十进制 或 十 六 进 制 ), 设置 颜色 成 分 值 时 ， 
十 进 制 值 以 逗号 分 隔 ， 十 六 进 制 值 前 面 通常 要 加 上 一 个 # 符 号 〈 例如 #fffff， 它 代表 白色 )。 表 4-3 
罗列 了 一 些 规 定 的 颜色 名 称 及 其 十 进 制 和 十 六 进 制 表示 。 

表 4-3 所 列 为 基本 颜色 名 称 。CSS 还 定义 了 一 批 扩展 颜色 名 。 这 里 不 便 列 出 那么 多 颜色 名 称 ， 
感 兴 趣 的 读者 可 在 下 面 的 网 址 找到 一 份 完整 的 列表 : www.w3.org/TR/css3-color。CSS 扩 展 颜 色 包 
括 许多 新 的 色调 系列 ， 其 中 一 些 是 基本 颜色 的 细微 变 体 。 表 4-4 列 出 了 一 组 可 用 的 灰色 派生 色 。 
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表 4-3 CSS 颜色 选编 
颜色 名 称 十 六 进 制 表 示 十 进 制 表 示 颜色 名 称 十 六 进 制 表 示 十 进 制 表 示 
black #000000 0,0,0 green #008000 0,128,0 
silver #COCOCO 192,192,192 lime #00FFOO 0,255,0 
gray #808080 128,128,128 olive #808000 128,128,0 
white #FFFFFF 255,255,255 yellow #FFFFOO 255,255,0 
maroon #800000 128,0,0 navy #000080 0,0,128 
red #FF0000 255,0,0 blue #0000FF 0,0,255 
purple #800080 128,0,128 teal #008080 0,128,128 
fushia #FFOOFF 255,0,255 aqua #00FFFF 0,255,255 
表 4-4 ”CSS 颜色 选编 

颜色 名 称 十 六 进 制 表 示 十 进 制 表示 

darkgray #a9a9a9 69,169,169 

darkslategray #2f4f4f 47,79,79 

dimgray #696969 05,105,105 

gray #808080 28,128,128 

lightgray #d3d3d3 211,211,211 

lightslategray #778899 19,136,153 

slategray #708090 12,128,144 

表示 更 复杂 的 颜色 
颜色 名 称 和 简单 的 十 六 进 制 数 不 是 表示 颜色 的 唯一 方式 。CSS 中 还 可 以 用 一 些 函 数 选择 颜 
色 。 表 4-$ 逐 一 介绍 了 这 些 函 数 。 
表 4-5 CSS 颜色 函数 

A X 说 — HH m 例 











rgb(r, g, b) RGB 模型 表示 颜色 color: rgb(112, 128, 144) 


RGB 模型 表示 颜色 , 外 加 一 个 用 于 表示 透明 度 的 x 值 (0 代表 color: 
全 透明 ，1 代 表 完 全 不 透明 ) 

jHSL 模 型 ( 色相 [ hue ]、 饱 和 度 [ saturation ] 和 明度 [lightness 
表示 颜色 

















rgba(r, g, b, a) rgba(112, 128, 144, 0.4) 























hsl(h, s, 1) 


— 


color: hsl(120, 10096, 2296) 














hsla(h, s, 1, a) ”与 HSL 模 式 类 似 ， 只 不 过 增加 了 一 个 表示 透明 度 的 < 值 color: hsla(120, 100%, 22%, 0.4) 


4.4 CSS 中 的 长 度 


许多 CSS 属 性 要 求 为 其 设置 长 度 值 。width 属 性 和 font-size 属 性 就 是 这 方面 的 例子 。 前 者 用 
于 设置 元 素 的 宽度 ， 后 者 用 于 设置 元 素 内 容 的 字号 。 代 码 清单 4-19 所 示 样 式 用 到 了 这 两 个 属性 。 
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代码 清单 4-19 ”为 属性 设置 长 度 值 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 


pt 
background: grey; 
color:white; 
width: 5cm; 
font-size: 20pt; 
} 
</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
«a class-"myclassi myclass2" href="http://w3c.org">Visit the W3C website</a> 


</body> 
</html> 


设置 长 度 值 时 , 应 让 数字 和 单位 标识 符 连 在 一 起 , 二 者 之 间 不 加 空格 或 其 他 字符 。 代 码 清单 
中 将 width 属性 值 设置 为 gsm, 这 表示 5 个 由 标识 符 cm(t 厘米 ) 代 表 的 单位 的 长 度 。 同 样 , 将 font-size 
属性 值 设置 为 20pt， 表 示 20 个 由 标识 符 pt〈 磅 ， 稍 后 会 有 介绍 ) 代表 的 单位 的 长 度 。CSS 规 定 了 
两 种 类 型 的 长 度 单位 ,一 种 是 绝对 单位 ， 另 一 种 是 与 其 他 属性 挂钩 的 相对 单位 。 下 面 介 绍 这 两 种 
单位 。 


4.4.1 绝对 长 度 


上 一 个 代码 清单 中 使 用 的 cm 和 pt 这 两 个 单位 都 属于 绝对 单位 。 这 类 单位 是 现实 世界 的 度量 单 
位 。CSS 支 持 五 种 绝对 单位 ， 如 表 4-6 所 示 。 
#4-6 CSS 中 的 绝对 单位 
























































单位 标识 符 说 — HB 
in 英寸 
cm 厘米 
pt 磅 (1 磅 等 于 1/72 英 寸 ) 
pc pica ( lpica 等 于 12 磅 ) 




















一 条 样式 中 可 以 混合 使 用 多 种 单位 , 包括 混合 使 用 绝对 单位 和 相对 单位 。 如 果 能 预先 知道 内 
容 的 呈现 方式 〈 例如 为 供 打印 的 文档 设计 样式 )， 那 么 绝对 单位 很 有 用 处 。 我 设计 CSS 样 式 不 怎 
么 使 用 绝对 单位 。 个 人 认为 相对 单位 更 灵活 、 更 容易 管理 ,而 且 我 也 很 少 创作 需要 与 现实 世界 度 
量 挂钩 的 内 容 。 
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提示 “读者 可 能 会 奇怪 表 中 怎么 没有 像素 这 个 单位 。 实 际 上 ，CSS 试 图 把 像素 作为 相对 度量 单位 
处 理 ， 然 而 事与愿违 。 本 章 稍 后 会 解释 这 个 问题 ， 详 情 参见 4.2 节 中 的 “像素 单位 的 问题 "。 


44.2 ”相对 长 度 

相对 长 度 的 规定 和 实现 都 比 绝对 长 度 更 复杂 , 需要 以 严密 、 精 确 的 语言 明确 定义 。 相 对 单位 
的 测量 需要 依托 其 他 类 型 的 单位 。 可 惜 CSS 规 范 的 语言 还 没 那 么 精确 ( 这 个 问题 已 经 困扰 CSS 多 
年 )。 因 此 尽管 CSS 规 定 了 许多 既 有 趣 又 有 用 的 相对 单位 ， 但 是 其 中 一 些 单位 还 没有 得 到 浏览 
广泛 、 一 致 的 支持 ， 用 户 还 无 法 使 用 。 表 4-7 列 出 了 主流 浏览 器 支持 的 一 些 CSS 相 对 单位 。 


表 4-7 CSS 相 对 单位 


























单位 标识 符 说 明 
em 与 元 素 字号 挂钩 
ex 与 元 素 字 体 的 “x 高 度 ” 挂 多 
rem 与 根 元 素 的 字号 挂钩 
px CSS 像 素 (假定 显示 设备 的 分 辩 率 为 96dpi ) 
% 另 一 属性 的 值 的 百分比 


下 面 来 看 如 何 用 这 些 单位 表示 长 度 。 

1. 与 字号 挂 钧 的 相对 单位 

使 用 相对 单位 时 所 设置 的 实际 上 是 另 一 种 度量 值 的 倍数 。 先 来 看 看 与 字号 挂钩 的 相对 单位 。 
代码 清单 4-20 即 为 一 例 。 


代码 清单 4-20 ”使 用 相对 单位 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
pt 
background: grey; 
color:white; 
font-size: 15pt; 
height: 2em; 

















</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<p style=" font-size:12pt">I also like mangos and cherries.«/p» 
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 
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本 例 将 height 属 性 值 设 置 为 2em, 意思 是 p 元 素 在 屏幕 上 显示 出 来 的 高 度 应 为 字号 的 两 倍 。 这 
个 倍数 是 在 显示 每 个 元 素 的 时 候 计 算出 来 的 ,本 例 在 style 元 素 中 为 p 元 素 的 font-size 设 置 了 默认 
值 15pt, 然后 又 在 文档 中 第 二 个 p 元 素 的 内 咀 样 式 里 将 该 属性 值 设置 为 12pt。 这 些 元 素 在 浏览 右 中 





的 显示 结果 见 图 4-15。 





/ fa Example x Wap 


f c | € a) 





| Visit the Apress website 





| € Œ | Q titan/listings/example.html uw A 
| 


I like apples and oranges 
also like mangos and cherries 





^ 








图 4-15 ”使 用 相对 单位 的 效果 





相对 单位 还 可 以 用 来 表示 另 一 个 相对 单位 的 倍数 。 代 码 清单 4-21 所 示例 子 中 ，height 属 性 值 
使 用 的 单位 是 em， 这 个 单位 是 从 font-size 属 性 值 推算 而 得 ， 而 font-size 属 性 值 在 此 使 用 的 单位 





是 rem。 


代码 清单 4-21 使 用 从 另 一 相对 单位 推算 出 来 的 相对 单位 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
html { 
font-size: 0.2in; 
} 


p { 
background: grey; 
color:white; 
font-size: 2rem; 
height: 2em; 
} 
</style> 
</head> 
<body style="font-size: 14pt"> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 











<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> 


</body> 
</html> 
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rem 单 位 根据 html 元 素 ( 文档 的 根 元 素 ) AYES TRE. ASÍ M AR SOMA EUREN, ( 使 用 直接 
在 ntml 元 素 的 style 属 性 中 定义 的 元 素 内 艇 样式 也 行 ) 将 html 元 素 的 字号 设置 为 0.2 甘 寸 ( 这 是 一 
个 绝对 单位 ) 在 另 一 条 样式 中 ，font-size 属 性 值 被 设置 为 2rem， 这 表示 使 用 该 值 的 所 有 元 素 的 
字号 将 是 根 元 素 字 号 的 两 倍 一 一 0.4 英 寸 。 这 条 样式 中 的 height 属 性 被 设置 为 2em, 这 又 翻 了 一 番 。 
于 是 p 元 素 在 浏览 器 中 将 以 0.4 英 寸 的 字号 显示 ， 其 高 度 则 是 0.8 英 寸 。 从 图 4-16 中 可 以 看 到 浏览 
处 理 这 些 样 式 的 方式 。 
[ — EH Se) 
/ © Example , 是 
€ c © titan/listings/example.html wW ` | 





























Visi wi . 2] 


I like apples and oranges. 


Visit W3C websit - 


n 























图 4-16 ”根据 其 他 相对 单位 定义 的 单位 











第 三 个 与 字体 相关 的 相对 单位 是 ex。 这 个 单位 指 的 是 当前 字体 的 x 高 度 ， 也 即 字 体 基线 到 中 
线 之 间 的 距离 ， 一 般 与 字母 x 的 高 度 相当 ( 所 以 得 了 这 么 一 个 名 称 )， 通常 1ex 大 致 等 于 0.5em。 


2. 像素 单位 的 问题 
Css 中 的 像素 息 怕 不 是 你 心里 想 的 那样 。 像 素 这 个 术语 一 般 是 指 显示 设备 上 可 寻 址 的 最 小 单 


元 一 一 图 像 的 基本 元 素 。CSS 却 是 另辟蹊径 ， 其 像素 定义 如 下 : 











参考 像素 是 距 读者 一 臂 之 阔 的 像素 密度 为 96dpi 的 设备 上 一 个 像素 的 视角 (visual angle) 。 


这 正 是 CSS 中 那 种 令 人 头疼 的 含糊 定义 。 我 无 意 数 落 谁 ， 只 不 过 要 靠 用 户 辟 长 来 度量 的 规范 
未 免 有 点 离谱 。 好 在 主流 浏览 器 部 没有 理会 CSS 定 义 的 像素 和 显示 设备 的 像素 之 间 的 差别 ， 它 们 
将 1 像素 视 为 1 英寸 的 1/196 ( 这 是 Windows 系 统 的 标准 像素 密度 。 有 些 平台 的 显示 设备 具有 不 同 的 
像素 密度 ， 它 们 的 浏览 器 通常 要 做 些 转换 工作 ， 让 1 像素 仍然 大 约 等 于 1 英寸 的 1196 )。 














提示 CSS 像素 的 完整 定义 参见 www.w3.org/TR/CSS21/syndata.html 圾 ength-units。 不 过 它 恐 怕 派 
不 上 什么 用 场 。 


这 样 一 来 ， 尽 管 CSS 像 素 原 想 定义 为 相对 度量 单位 ， 结 果 却 被 浏览 器 当成 绝对 单位 对 待 。 代 
码 清单 4-22 中 的 CSS 样 式 使 用 的 就 是 像素 单位 。 
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代码 清单 4-22 ”在 样式 中 使 用 像素 单位 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
p { 
background: grey; 
color:white; 
font-size: 20px; 
width: 200px; 


</style> 

</head> 

<body> 
<a href="http://apress.com">Vi 
<p>I like <span>apples</span> 
<a class="myclass1 myclass2" h 

</body> 

</html> 








sit the Apress website</a> 
and oranges.</p> 
ref="http://w3c.org">Visit the W3C website</a> 





这 个 例子 中 font-size 和 width 属性 的 值 都 使 用 了 像素 单位 。 图 4-17 显 示 了 浏览 器 应 用 这 些 样 


式 的 效果 。 
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EXIT 





J © Example 
| < C © titan/l 


Visit the Apress website 


Visit the W3C website 





I like apples and 
oranges. 


~ — 3 ies 
istings/example.html wl 

















图 








4-17 ”使 用 像素 单位 








提示 我 在 CSS 样 式 中 也 经 常 使 用 像素 单位 ， 但 这 只 是 一 种 积 习 而 已 。 其 实 em 单位 更 加 灵活 。 
如 果 采 用 em 单位 ， 那 么 需要 修改 样式 设计 时 只 消 改 一 下 字号 即 可 ,样式 的 其 他 部 分 一 切 
如 常 。 记 住 ，CSS 像 素 原本 是 个 相对 单位 ， 但 在 实际 使 用 中 却 变 成 了 绝对 单位 ， 因 此 就 


没 那么 灵活 了 。 


3. 百分比 单位 
可 以 把 一 个 度量 单位 表示 为 其 他 属 公 

















E 值 的 百分比 , 这 正 是 % 单 位 的 用 途 , 如 代码 清单 4-23 所 示 。 
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代码 清单 4-23 ”以 其 他 属性 值 的 百分比 为 单位 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 
background: grey; 
color:white; 
font-size: 200%; 
width: 50%; 





</style> 

</head> 

<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 


<a class-"myclassi myclass2" href-"http://w3c.org"»Visit the W3C website</a> 
</body> 


</html> 


使 用 百分比 单位 会 遇 到 两 个 麻烦 。 一 是 并 非 所 有 属性 都 能 用 这 个 单位 。 二 是 对 于 能 用 百分比 


















































单位 的 属性 ， 那 个 百分比 挂钩 的 其 他 属性 各 不 相同 。 例 如 ， 对 于 font-size 属 性 ,挂钩 的 是 元 素 
邮 继承 到 的 font-size 值 ;而 对 于 width 属性 ， 挂 钩 的 则 是 元 素 的 包含 块 的 宽度 。 
" 这 些 问 题 其 实 没 那么 复杂 。 包含 块 (这 是 一 个 反复 出 现 的 重要 概念 ) 留待 第 16 章 介绍 。 此外， 
后 面 ( 从 第 19 章 起 ) 逐一 介绍 CSS 属 性 时 ， 将 会 说 明 哪些 CSS 属 性 支持 百分比 单位 ， 以 及 百分比 














是 根据 什么 属性 值 计算 的 。 

4. 未 获 广 泛 支持 的 CSS 属 性 

除了 前 面 罗列 的 那些 相对 单位 ，CSS 还 定义 了 其 他 一 些 单位 ， 但 是 它们 还 未 获得 广泛 支持 。 
这 些 新 单位 都 列 在 表 4-8 中 。 假 如 得 到 广泛 、 一 致 的 实现 ， 这 些 单位 会 很 有 用 ， 不 过 在 此 之 前 最 





































































































好 敬而远之 。 
表 4-8 ”缺乏 浏览 器 支持 的 CSS 相 对 度量 单位 

单位 标识 名 说 AA 
gd 与 网 格 (grid) 挂 钧 。 它 依赖 于 CSS 规 范 中 一 些 定义 不 太 明 确 的 属性 ， 所 以 未 获 广 泛 支 持 
vw 与 视 口 (viewport) 宽度 挂钩 。1vw 等 于 文档 显示 区 域 (如 浏览 器 窗口 ) 宽度 的 1% 
vh 与 视 口 高 度 挂钩 。1vh 等 于 文档 显示 区 域 高 度 的 1% 
vm? lvm 等 于 最 短视 口 轴 长 〈 高 度 和 宽度 中 较 小 的 那个 ) 的 1% 
ch 与 用 当前 字体 显示 的 字符 的 平均 宽度 挂钩 。 它 在 CSS 规 范 中 的 定义 很 滚 草 ， 其 实现 也 不 一 臻 




















vw、vh、vm 这 三 个 单位 应 用 前 景 广阔 , 但 目前 只 在 IE 中 得 到 了 实现 。 而 且 ， 据 我 粗略 观察 ， 
正中 的 实现 方式 不 太 符合 CSS 规 范 。 











D 这 个 单位 已 被 重 命名 为 vmin， 同 时 还 增加 了 另 一 个 单位 vmax。 这 两 个 单位 分 别 等 于 vw 和 vh 中 较 小 和 较 大 的 那个 。 
一 一 译 者 注 
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5. 用 算式 作 值 
允许 将 CSS 属 性 值 设置 为 算式 是 CSS3 定 义 的 一 个 引 人 关 注 的 特性 。 这 种 灵活 手段 在 控制 能 力 
和 精确 程度 方面 都 给 样式 设计 工作 提供 了 帮助 。 代 码 清 单 4-24 即 是 一 例 。 


代码 清单 4-24 ”以 算式 为 值 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 
background: grey; 
color:white; 
font-size: 20pt; 
width: calc(80% - 20px); 
} 
</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
«a class-"myclassi myclass2" href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


算式 包含 在 关键 字 calc 之 后 的 括号 之 中 。 在 其 中 可 以 混合 使 用 各 种 单位 进行 基本 的 算术 运 
算 。 别 高 兴 得 太 早 ， 在 撰写 本 书 的 时 候 ， 支 持 calc() 这 个 特性 的 只 有 J 下。 未 得 到 广泛 支持 的 特性 
本 书 一 般 都 避 而 不 谈 ， 不 过 我 相信 这 个 特性 会 得 到 大 家 认可 ， 甚 采用 情况 值得 持续 关注 。 


45 其 他 CSS 单位 

CSS 中 的 单位 不 止 有 长 度 这 一 项 ， 而 是 种 类 繁多 。 但 是 其 中 只 有 一 小 部 分 得 到 了 广泛 应 用 。 
下 面 要 介绍 的 是 本 书 用 到 的 那些 单位 。 
4.5.1 使 用 CSS 角度 


第 23 草 介绍 变换 的 时 候 将 会 用 到 角度 。 角度 的 表示 方式 是 一 个 数字 后 跟 一 个 单位 , 如 360deg。 
表 4-9 罗 列 了 已 得 到 支持 的 角度 单位 。 


表 4-9 CSS 角 度 单位 





























































































































单位 标识 符 说 — BH 
deg EE ( 取 值 范围 : Odeg ~ 360deg ) 
grad 分 度 ( 取 值 范围 : Ograd ~ 400grad ) 
rad 弧度 ( 取 值 范 围 : Orad ~ 6.28rad ) 




















turn 圆周 (1ltur 等 于 360deg ) 
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4.5.2 ”使 用 CSS 时 间 


可 以 用 CSS 时 间 单 位 度量 时 间 间 隔 。 时 间 的 表示 方式 是 一 个 数字 后 跟 一 个 时 间 单 位 ， 如 
100ms。 表 4-10 罗 列 了 已 得 到 支持 的 时 间 单 位 。 


表 4-10” ”CSS 时间 单 位 














单位 标识 符 说 明 
s Th 
ms 毫秒 ( 1s 等 于 1000ms ) 


4.6 测试 CSS 特性 的 支持 情况 


CSS 规 范 的 分 散 性 及 其 在 浏览 器 中 参差 不 齐 的 实现 ， 导 致 要 搞 清 有 哪些 CSS 特 性 可 用 并 不 轻 
松 。 下 面 给 读者 推荐 几 个 用 来 检测 对 CSS 的 支持 程度 的 有 用 工具 。 

第 一 个 工具 是 这 个 网 站 : http:/caniuse.com。 它 对 各 款 浏览 器 的 各 种 版 本 对 HTMLS 和 CSS3 
的 支持 情况 进行 了 全 面 分 析 , 所 提供 的 详细 信息 覆盖 了 多 种 操作 系统 上 为 数 众多 的 桌面 版 和 手机 
版 的 浏览 器 。 此 外 ,， 它 还 提供 了 根据 浏览 器 的 流行 程度 和 市 场 影响 作出 决策 支持 的 简单 工具 。 我 
觉得 在 启动 一 个 新 项 目 时 , 借助 这 个 网 站 分 析 一 下 有 哪些 特性 可 以 放心 使 用 倒 也 相当 不 错 。 有 了 
它 的 帮助 ， 跟 踪 零 零散 散 的 CSS 标 准 制定 进程 和 浏览 器 的 实现 就 变 得 相当 轻松 了 。 

第 二 个 工具 是 可 以 用 来 动态 测试 各 个 特性 的 Modernizr (www.modernizr.com )。 它 是 一 个 小 小 
的 JavaScript 库 ， 可 以 测试 各 种 关键 的 HTML5 和 CSS 特 性 是 否 到 位 ， 以 便 根据 用 户 所 用 浏览 器 对 
这 些 特性 的 支持 情况 作出 相应 调整 。 这 个 工具 还 有 一 些 不 错 的 其 他 功能 , 例如 在 正 的 较 早 版 本 中 
呈现 新 的 HTML5 语 义 元 素 (参见 第 10 章 )。 


4.7 有 用 的 CSS 工具 


有 些 工 具 本 书后 面 不 再 提 及 ,不 过 读者 可 能 会 发 现在 处 理 CSS 相 关 事宜 时 它们 很 有 用 。 下 面 
将 逐一 介绍 这 类 工具 。 所 有 这 些 工 具 要 么 可 以 免费 获得 ， 要 么 已 经 集成 到 了 主流 浏览 需 中 。 


4.7.1 浏览 器 样式 报告 


所 有 主流 浏览 器 的 开发 人 员工 具 都 具有 样式 检查 功能 。 其 实现 大 同 小 异 , 基本 路 数 都 是 在 文 
档 呈 现 结果 或 源 代码 中 选择 一 个 元 素 ， 然 后 查看 浏览 器 应 用 在 上 面 的 样式 。 

这 些 样 式 检 查 工 具 能 够 显示 样式 层 和 至 的 次 序 和 计算 样式 (computed style, HIT AJJP BE Al 
继承 而 来 的 样式 后 最 终 应 用 到 元 素 上 的 样式 )。 用 户 甚至 能 用 它们 修改 样式 或 加 入 新 样式 并 查看 
其 效果 。 图 4-18 所 示 为 谷歌 的 Chrome 浏 览 器 中 的 样式 检查 工具 。 
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- zl f = ~ Py x 
| (S) elements | (9i | Resources Q Network Di Scripts Q timetine & Profiles » |Q Search Elements jo 
v Computed Style E Show inherited ^ 
v «html» > background-attachment: scroll; 
> <head>..</head> > background-clip: border-box; 
v <body> > background-color: Mlgray; 
<a href="http://apress.com">Visit the Apress website</a> > background-image: none; 
E > background-origin: padding-box; 
«a classs"myclassl myclass2" href="http://w3c.org">Visit the = color: | white; 
W3C website</a> > display: block; = 
</body> > font-size: 27px; 
</html> height: 32px; 
width: 798px; 
v Styles x- 
| element.style 1 
b 
Matched CSS Rules 
ip t example.htmi:6 
b background: grey; 
color: | lwhite; 
font-size: 20pt; 
} 





1 >Z Q hmi | body 
图 4-18 在 谷歌 的 Chrome 中 检查 CSS 样 式 


4.7.2 用 SelectorGadget 生成 选择 器 


第 17 章 和 第 18 章 将 会 介绍 CSS 支 持 的 所 有 选择 器 。 它 们 种 类 繁多 ， 还 能 组 合 起 来 产生 强大 而 
又 灵活 的 效果 。 要 想 掌握 CSS 选 择 器 需要 一 段 时 间 。 有 一 些 工 具 可 以 在 这 方面 提供 一 些 帮 助 。 据 
我 所 知 最 有 用 的 工具 之 一 是 SelectorGadget。 这 是 一 个 JavaScript 书 签 小 程序 (bookmarklet ), 可 从 
www.selectorgadget.com 获 得 。 

这 个 工具 有 一 段 时 间 没 有 更 新 了 ,不 过 在 最 新 的 浏览 器 上 依然 能 用 。 按 说 明 安装 即 可 。 浏览 
器 载 人 这 个 工具 的 脚本 程序 之 后 ， 用 户 点 击 页 面 元 素 就 能 生成 相应 的 CSS 选 择 器 。 图 4-19 所 示 为 
使 用 中 的 SelectorGadget。 

















== c--— 8. 
J © Example x Ye 
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图 4-19 ”用 SelectorGadget 生 成 CSS 选 择 右 
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4.7.3 用 LESS 改进 CSS 


接触 过 CSS 的 用 户 很 快 就 会 发 现 用 它 来 描述 样式 比较 哆 味 。 大 量 重复 性 内 容 的 存在 导致 样式 
的 长 期 维护 工作 既 费 时 间 又 容易 出 错 。 

有 一 个 名 为 LESS 的 工具 可 以 用 来 扩展 CSS, 它 使 用 JavaScript 对 CSS 了 予以 改进 。 这 个 工具 有 一 
些 不 错 的 特性 ,包括 变 量 、 样 式 间 的 继承 以 及 函数 等 。 我 最 近 经 常 使 用 LESS， 其 效果 令 人 满意 。 
读者 可 从 以 下 网 站 详细 了 解 并 下 载 该 JavaScript 库 : http://lesscss.org。 
































4.7.4 使 用 CSS 框架 


有 很 多 高 质量 的 CSS 框 架 可 作为 开发 者 网 站 和 Web 应 用 系统 的 基石 。 它 们 内 置 多 套 样式 ， 
此 用 户 不 必 再 干 重复 发 明 轮 子 的 事 。 优 秀 的 框架 还 可 以 化 浏览 器 实现 的 差异 于 无 形 。 

我 推荐 的 CSS 框 架 是 Blueprint ， 它 可 以 从 这 个 网 址 下 载 : www.blueprintcss.orfg。 这 个 框架 用 
起 来 既 方 便 又 灵活 ， 还 有 一 套用 于 建立 网 格 布局 的 出 色 功 能 。 











4.8 小结 


本 章 介 绍 了 创建 和 应 用 样式 的 方法 、 样 式 层 琶 的 机 制 以 及 CSS 度 量 单位 ， 也 介绍 了 一 些 用 来 
检测 浏览 器 对 特定 CSS 特 性 支持 情况 的 有 用 工具 ， 还 推荐 了 一 些 对 使 用 CSS 很 有 帮助 的 资源 。 
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JavaScript 过 得 挺 不 容易 。 出 生 不 顺 , 青春 期 更 满 是 苦涩 。 直 到 近年 来 , 它 才 开始 树立 起 一 种 
实用 的 灵活 语言 的 形象 。JavaScript 能 做 的 事 很 多 , 尽管 它 还 称 不 上 完善 , 但 也 值得 认真 对 待 。 本 
童 的 目的 是 为 读者 在 JavaScript 领 域 充 一 下 电 ， 同 时 介绍 一 些 后 面 将 要 用 到 的 函数 和 特性 。 























提示 “要 想 充分 利用 本 书 ， 读 者 需要 具有 一 些 编程 经 验 ， 懂 得 变量 、 函 数 和 对 象 等 概念 。 对 于 
这 方面 的 生 手 ，lifehacker.com 这 个 大 众 化 网 站 上 的 系列 文章 是 不 错 的 启蒙 读物 。 它 没有 
预 设 编程 知识 门槛 ， 所 有 例子 都 以 JavaScript 写 就 ， 非 常 方便 。 其 使 用 说 明 参 见 : 


http://lifehacker.com/5744 1 13/learn-to-code-the-full-beginners-guide. 


本 章 关注 的 是 Web 编 程 所 需 的 核心 JavaScript 特 性 有 意 深入 学 习 JavaScript 的 读者 可 以 读 一 下 
我 推荐 的 两 本 书 。 在 语言 的 一 般 性 知识 方面 ， 我 推荐 David Flanagan 写 的 JavaScript: The Definitive 
Guide (OReilly 出 版 )“。 在 高 级 概念 和 特性 方面 ， 我 推荐 Ross Harmes 和 Dustin Diaz 写 的 Pro 


























JavaSript Design Patterns ( Apress 出 版 ) “。 表 5-1 概 括 了 本 章 内 容 。 


表 5-1 ”本章 内 容 概要 




































































|) 题 解决 方案 代码 清单 
定义 文档 内 构 脚 本 程序 更 用 script 元 素 5-1 
立即 执行 一 条 程序 语句 将 语句 直接 放 在 script 元 素 内 5-2 
定义 JavaScript 函 数 更 用 function 关 键 字 5-3 ~ 5-5 
定义 基本 类 型 的 变量 使 用 var 关 键 字 ， 并 以 字面 量 表示 其 值 5-6 ~ 5-9 
创建 对 象 使 用 new 0bject() 或 对 象 字面 量 语法 5-10, 5-11 
给 对 象 添加 方法 新 建 一 个 属性 ， 然 后 将 一 个 函数 赋 给 它 5-12 
获取 或 设置 对 象 的 属性 值 使 用 圆 点 或 数组 索引 符号 表示 法 5-13 
枚 举 对 象 中 的 属性 使 用 for...in 语 名 5-14 























CD 本 书 中 文 版 最 新 版 《JavaScript 权 威 指南 ( 第 6 版 )》 已 由 机 械 工业 出 版 社 出 版 。 一 一 编者 注 
© 本 书 中 文 版 《JavaScript 设 计 模 式 》 已 由 人 民 邮 电 出 版 社 出 版 〈 谢 廷 晨 译 ) 一 一 译 者 注 
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( 续 ) 
jg a 解决 方案 代码 清单 
给 对 象 添加 属性 或 方法 将 一 个 值 赋 给 所 需 属性 名 5-15、5-16 
删除 对 象 的 一 个 属性 使 用 delete 关 键 字 5-17 
判断 对 象 是 否 具 有 某 个 属性 使 用 in 表达 式 5-18 
判断 两 个 对 象 的 值 是 否 相 等 ”使 用 相等 运算 符 == 5-19、5-21 
(不 考虑 类 型 差别 ) 
判断 两 个 对 象 是 否 类 型 和 值 都 ”使 用 等 同 运 算 符 === 5-20、5-22 
相同 
显 式 类 型 转换 更 用 Number 或 string 函 数 5-23 ~ 5-25 
创建 数组 使 用 new Array() 或 数组 字面 量 5-26、5-27 
读 写 数组 内 容 更 用 索引 符号 表示 法 获取 数组 中 指定 位 置 元 素 的 值 或 将 新 值 赋 给 它 5-28, 5-29 
枚 举 数组 内 容 EH forin 5-30 
处 理 错误 使 用 try...catch 语 句 5-31、5-32 
比较 nul1 和 undefined 值 将 值 转换 为 boolean 类 型 ， 或 在 需要 同等 对 待 nul1 和 undefined 时 使 5-33 ~ 5-36 
用 相等 运算 符 ==， 在 要 区 别 对 等 它们 时 使 用 恒 等 运算 符 === 








5.1 准备 使 用 JavaScript 


在 HTML 文档 中 定义 脚本 有 几 种 方法 可 供 选 择 。 既 可 以 定义 内 腐 脚本 ( 脚本 是 HTML 文 档 的 
一 部 分 ) 也 可 以 定义 外 部 脚本 〈 脚本 包含 在 另 一 个 文件 中 , 通过 一 个 URL 引 用 )。 这 两 种 方法 都 
要 用 到 script 元 素 〈 详 见 第 7 章 )。 简洁 起 见 ， 本 章 使 用 的 是 内 嵌 脚 本 。 代 码 清 单 5-1 所 示 为 这 种 
脚本 的 一 个 例子 。 


代码 清单 5-1 一 段 简单 的 内 艇 脚本 


«IDOCTYPE HTML» 
«html» 
«head» 
«title»Example«/title» 
«/head» 
«body» 
«script type-"text/javascript"» 
document .writeln("Hello"); 
</script> 
</body> 
</html> 


这 段 小 脚本 的 作用 是 在 文档 中 加 入 单词 Hello。script 元 素 位 于 文档 中 其 他 内 容 之 后 , 这 样 一 
来 在 脚本 执行 之 前 浏览 器 就 已 经 对 其 他 元 素 进行 了 解析 。 第 7 章 会 解释 为 什么 这 样 做 很 重要 《〈 以 
及 如 何 对 脚本 的 执行 加 以 控制 )。 
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HER “出 于 简洁 考虑 ,本 书 介绍 JavaScript 时 使 用 的 许多 例子 用 document.writeln 方 法 显示 脚本 的 
结果 。 这 个 方法 的 作用 只 是 在 HTML 文 档 中 加 入 一 行文 字 。 第 26 章 对 Document 对 象 及 其 
writeln 方 法 有 更 多 介绍 。 





图 5-1 显 示 了 这 个 例子 在 浏览 器 中 显示 的 结果 。 
( ae ee) 
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图 5-1 用 JavaScript 向 HTML 文档 中 添加 内 容 


本 章 后 面 不 再 使 用 屏幕 截图 ， 只 显示 一 些 例子 的 结果 。 例 如 ， 代 码 清单 5-1 的 输出 结果 会 
示 如 下 : 
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Hello 











有 些 结果 的 格式 会 作 一 些 处 理 , 以 便 阅 读 。 后 面 各 节 将 要 介绍 JavaScript 语 言 的 核心 特性 。 有 
现代 语言 编程 经 验 的 读者 会 发 现 JavaScript 的 语法 和 风格 看 起 来 很 熟悉 。 


5.2 ”使 用 语句 


JavaScript 的 基本 元 素 是 语句 。 一 条 语句 代表 着 一 条 命令 ,通常 以 分 号 ( ; ) 结尾 。 实 际 上 分 
号 用 不 用 都 可 以 , 不 过 加 上 分 号 可 让 代码 更 易 阅 读 , 并 且 可 以 在 一 行书 写 几 条 语句 。 代码 清单 5-2 
示范 了 脚本 程序 中 的 几 条 语句 。 


代码 清单 5-2 使 用 JavaScript 语 句 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
document .writeln("This is a statement"); 
document .writeln("This is also a statement"); 
</script> 
</body> 
</html> 
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浏览 器 依次 执行 每 条 语句 。 本 例 做 的 只 是 输出 两 条 信息 。 结 果 如 下 《读者 看 到 的 输出 结果 有 
可 能 都 在 一 行 ): 


This is a statement 


This is also a statement 


5.3 ”定义 和 使 用 函数 


如 果 像 代码 清单 5-2 中 那样 在 script 元 素 中 直接 定义 语句 ， 那 么 浏览 器 一 遇 到 这 些 语句 就 会 
执行 它们 。 也 可 以 把 几 条 语句 包装 在 一 个 函数 中 , 浏览 器 只 有 在 遇 到 一 条 调用 该 函数 的 语句 时 才 
会 执行 它 。 如 代码 清单 5-3 所 示 。 


代码 清单 5-3 jE X JavaScript PK% 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 























function myFunc() { 
document.writeln("This is a statement"); 


h 


myFunc() ; 
«/script» 
«/body» 
«/html» 


函数 所 含 语句 被 包围 在 一 对 大 括号 ( {和 } ) 之 间 ， 称 为 代码 块 。 这 个 代码 清单 定义 了 一 个 名 为 
myFunc 的 函数 ,其 代码 块 中 只 含有 一 条 语句 。JavaScript 是 区 分 大 小 写 的 语言 ， 因 此 function 这 个 关键 
字 必 须 小 写 。 只 有 在 浏览 器 遇 到 下 面 这 样 一 条 调用 myFunc 函 数 的 语句 时 , 该 函数 中 的 语句 才 会 执行 。 

myFunc(); 

这 个 例子 没什么 特别 的 用 处 ,因为 在 函数 定义 之 后 就 立即 调用 了 它 。 本 章 后 面 讲 到 事件 的 时 
候 ， 所 用 例子 中 的 函数 要 有 用 得 多 。 


5.3.1 EMPSRAN HR 
与 大 多 数 语言 一 样 ，JavaScript 中 也 可 以 为 函数 定义 参数 ， 如 代码 清单 5-4 所 示 。 
代码 清单 5-4 ”定义 带 参 数 的 函数 


<!DOCTYPE HTML> 
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<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 


function myFunc(name, weather) { 
document .writeln("Hello " + name + "."); 
document .writeln("It is " + weather + " today"); 


h 


myFunc("Adam", "sunny"); 
«/script» 
</body> 
</html> 


这 里 为 myFunc 函 数 添 加 了 两 个 参数 : name 和 weather。JavaScript 是 门 弱 类 型 语言 ， 所 以 定义 
函数 的 时 候 不 必 声 明 参 数 的 数据 类 型 。 本 章 稍 后 讲 JavaScript 变 量 的 时 候 会 回头 解释 弱 类 型 的 寻 
情 。 调 用 带 参数 的 函数 时 要 像 这 样 提 供 相应 的 值 作为 参数 : 

myFunc("Adam", "sunny"); 


这 个 代码 清单 的 输出 结果 如 下 : 





p 








Hello Adam. It is sunny today 








调用 函数 时 提供 的 参数 数目 不 必 与 函数 定义 中 的 参数 数目 相同 。 如 果 提 供 的 参数 值 更 少 , 那 
么 所 有 未 提供 值 的 参数 的 值 均 为 undefined。 如 果 提 供 的 参数 值 更 多 ,那么 多 出 的 值 会 被 忽略 。 
其 结果 是 , 要 想 定义 两 个 同名 但 参数 数目 不 同 的 函数 , 然后 让 JavaScript 根 据 调 用 函数 时 提供 的 参 
数值 数目 确定 所 调用 的 函数 是 不 可 能 的 。 要 是 定义 了 两 个 同名 的 函数 , 那么 第 二 个 定义 将 会 取代 
第 二 个。 


5.3.2 ”定义 会 返回 结果 的 函数 
可 以 用 return 关 键 字 从 函数 中 返回 结果 ， 代 码 清单 5-5 示 范 了 一 个 这 样 的 函数 。 
代码 清单 5-5 “从 函数 中 返回 结果 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
































function myFunc(name) { 
return ("Hello " + name + "."); 
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h 
document .writeln(myFunc("Adam")); 
«/script» 
«/body» 
«/html» 


本 例 中 的 函数 定义 了 一 个 参数 并 用 它 生成 一 个 简单 的 结果 。 脚本 中 的 最 后 一 条 语句 调用 了 这 
个 函数 并 将 结果 作为 参数 传递 给 document .writeln 函 数 。 如 下 所 示 : 
document .writeln(myFunc("Adam")); 
意 ， 定 义 这 个 函数 时 不 用 声明 它 会 返回 结果 ,也 不 用 声明 结果 的 数据 类 型 。 代 码 清单 的 输 
出 结果 如 下 所 示 : 











Hello Adam. 





5.4 使 用 变量 和 类 型 


定义 变量 要 使 用 var 关 键 字 ， 在 定义 的 同时 还 可 以 像 在 一 条 单独 的 语句 中 那样 为 其 赋值 。 定 
义 在 函数 中 的 变量 称 为 局 部 交 量 ， 只 能 在 该 函数 范围 内 使 用 。 直 接 在 script 元 素 中 定义 的 变量 称 
为 全 局 变量 ， 可 以 在 任何 地 方 使 用 一 一 包括 在 其 他 脚本 中 。 代 码 清 单 5-6 示 范 了 局 部 变量 和 全 局 
变量 的 用 法 。 


代码 清单 5-6 ”使 用 局 部 变量 和 全 局 变量 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type-"text/javascript"» 
var myGlobalVar = "apples"; 





























function myFunc(name) { 
var myLocalVar = "sunny"; 
return ("Hello " + name + ". Today is " + myLocalVar + "."); 
B 
document .writeln(myFunc("Adam")) ; 
</script> 
«script type-"text/javascript"» 
document.writeln("I like " + myGlobalVar); 
«/script» 
«/body» 
«/html» 


JavaScript 是 一 种 弱 类 型 语言 , 但 这 不 代表 它 没有 类 型 , 而 是 指 不 用 明确 声明 变量 的 类 型 以 及 
可 随心 所 欲 地 用 同一 变量 表示 不 同类 型 的 值 。JavaScript 根 据 赋 给 变量 的 值 确定 其 类 型 , 还 可 以 根 
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据 使 用 场景 在 类 型 间 自由 转换 。 代 码 清单 5-6 的 输出 结果 如 下 : 





Hello Adam. Today is sunny. I like apples 





5.4.1 使 用 基本 类 型 


JavaScript 定 义 了 一 小 批 基本 类 型 (primitive type )， 它 们 包括 字符 串 类 型 ( string )、 数 值 类 
型 (number ) 和 布尔 类 型 ( boolean )。 这 看 起 来 可 能 有 点 少 ,， 但 JavaScript 的 这 三 种 类 型 具有 很 大 
的 灵活 性 。 

1. 字符 串 类 型 

string 类 型 的 值 可 以 用 夹 在 一 对 双 引 号 或 单 引 号 之 间 的 一 串 字符 表示 ， 如 代码 清单 5-7 所 示 。 


代码 清单 5-7 定义 字符 串 变量 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var firstString = "This is a string"; 
var secondString = ‘And so is this'; 
</script> 
</body> 
</html> 


表示 字符 串 时 使 用 的 引号 要 匹配 。 例 如 ， 字 符 串 前 端 用 单 引 号 而 后 端 用 双 引 号 是 不 行 的 。 

2. 布尔 类 型 

boolean 类 型 有 两 个 值 : true 和 false。 代 码 清单 5-8 中 这 两 个 值 都 用 到 了 ， 这 个 类 型 最 重要 的 
使 用 场合 是 本 章 稍 后 将 要 讲 到 的 条 件 语句 。 


代码 清单 5-8 定义 布尔 变量 


<!DOCTYPE HTML> 








T 

















«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var firstBool = true; 
var secondBool = false; 
</script> 
</body> 


</html> 
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3. 数值 类 型 
整数 和 浮 点 数 (也 称 实 数 ) 都 用 number 类 型 表示 ， 代 码 清单 5-9 示 范 了 其 用 法 。 


代码 清单 5-9 ”定义 数值 变量 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var daysInWeek = 7; 
var pi = 3.14; 
var hexValue = OxFFFF; 
</script> 
</body> 
</html> 


定义 number 类 型 变量 时 不 必 言 明 所 用 的 是 哪 种 数值 ,只 消 写 出 需要 的 值 即 可 ，JavaScript 会 酌 


情 处 理 。 上 例 先 后 使 用 了 一 个 整数 、 一 个 浮 点 数 和 一 个 以 0x 开 头 的 十 六 进 制 数 。 
5.4.2 创建 对 象 


























JavaScript 支 持 对 象 的 概念 。 有 多 种 方法 可 以 用 来 创建 对 象 , 代码 清单 5-10 是 一 个 简单 的 例子 。 


代码 清单 5-10 ”创建 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = new Object(); 
myData.name = "Adam"; 
myData.weather = "sunny"; 


document .writeln("Hello " + myData.name + ". "); 
document .writeln("Today is " + myData.weather + "."); 
</script> 
</body> 
</html> 


此 例 通过 调用 new Object ) 的 方式 创建 了 一 个 对 象 ， 然 后 将 其 赋 给 一 个 名 为 myData 的 变量 。 








在 此 之 后 ， 即 可 像 这 样 通过 赋值 的 方式 定义 其 属性 : 
myData.name = "Adam"; 


在 这 条 语 名 之前， 对象 并 没有 一 个 名 为 name 的 属性 。 这 条 语句 执行 之 后 就 有 了 这 个 









































属性 ， 而 


且 其 值 已 被 设置 为 Adam。 像 这 样 用 变量 名 后 加 一 句点 再 加 属性 名 的 方式 就 能 获取 该 属性 的 值 : 
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document .writeln("Hello " + myData.name + ". "); 


1. 使 用 对 象 字面 量 
用 对 象 字面 量 的 方式 可 以 一 口气 定义 一 个 对 象 及 其 属性 ， 代 码 清单 5-11 示 范 了 其 做 法 。 


代码 清单 5-11 使 用 对 象 字面 量 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = { 
name: "Adam", 
weather: "sunny" 


h 





document.writeln("Hello " + myData.name + ". "); 
document.writeln("Today is " + myData.weather + "."); 
«/script» 
«/body» 
«/html» 


从 代码 清单 中 可 以 看 到 ， 属 性 的 名 称 和 值 之 间 以 冒号 ( : ) 分 隔 ， 而 各 个 属性 之 间 又 以 逗号 
C) 分 隔 。 

2. 将 函数 用 做 方法 

对 象 可 以 添加 属性 ,也 能 添加 函数 。 属 于 一 个 对 象 的 函数 称 为 其 方法 。 这 是 我 最 喜欢 的 一 大 
JavaScript 特 性 。 我 也 不 知道 为 什么 , 反正 就 是 觉得 这 个 特性 很 优雅 , 总 是 那么 招 人 喜爱 。 代 码 清 
单 5-12 示 范 了 如 何以 这 种 方式 添加 方法 。 


代码 清单 5-12 ”为 对 象 添加 方法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = { 
name: "Adam", 
weather: "sunny", 
printMessages: function() { 
document .writeln("Hello 
document .writeln("Today is 

































































+ this.name + ". "); 
"+ this.weather + "."); 
} 
h 


myData.printMessages(); 
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</script> 
</body> 
</html> 


此 例 将 一 个 函数 变 成 了 一 个 名 为 printMessages 的 方法 。 注 意 ， 在 方法 内 部 使 用 对 象 属性 时 
要 用 到 this 关 键 字 。 函 数 作为 方法 使 用 时 ， 其 所 属 对 象 会 以 关键 字 this 的 形式 作为 一 个 参数 被 传 
给 它 。 上 述 代码 清单 的 输出 结果 如 下 所 示 : 








Hello Adam. Today is sunny. 


提示 在 创造 和 管理 对 象 方面 JavaScript 还 有 许多 招数 可 用 , 不 过 在 讨论 HTML5 的 时 候 还 用 不 着 
这 些 特性 。 有 意 深入 钻研 这 门 语言 的 读者 可 以 去 读 一 下 本 章 开头 推荐 的 书 。 


5.4.3 ”使 用 对 象 


创建 对 象 之 后 ， 可 以 用 来 做 许多 事 。 本 节 将 介绍 一 些 本 书后 面 经 常会 用 到 的 方法 。 

1. 读 取 和 修改 属性 值 

对 象 最 显而易见 的 操作 是 读 取 或 修改 属性 值 。 这 些 操 作 有 两 种 不 同 的 语法 形式 ， 如 代码 清 
单 5-13 所 示 。 


代码 清单 5-13 ” 读 取 和 修改 对 象 属性 值 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = { 
name: "Adam", 
weather: "sunny", 


5 











myData.name - "Joe"; 
myData["weather"] - "raining"; 


document.writeln("Hello " + myData.name + "."); 
document.writeln("It is " + myData["weather"]); 


«/script» 
</body> 
</html> 
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第 一 种 形式 大 多 数 程序 员 都 很 熟悉 , 前 面 的 例子 用 的 也 是 这 种 形式 。 其 做 法 是 像 这 样 用 句点 
将 对 象 名 和 属性 名 连接 在 一 起 : 

myData.name = "Joe"; 

第 二 种 形式 类 似 数组 索引 ， 如 下 所 示 : 

myData["weather"] = "raining"; 
在 这 种 形式 中 ， 属 性 名 作为 一 个 字符 串 放 在 一 对 方 括号 之 间 。 这 种 存 取 属性 值 的 办 法 非常 方便 ， 
这 是 因为 此 法 可 用 变量 表示 属性 名 。 如 下 所 示 : 

var myData = { 


name: "Adam", 
weather: "sunny", 























h 


var propName - "weather"; 
myData["propName"] - "raining"; 


在 此 基础 上 才能 枚 举 对 象 属性 ， 下 面 就 来 谈 这 个 话题 。 
2. 枚 举 对 象 属性 
要 枚 举 对 象 属性 可 以 使 用 for.. .in 语 句 。 代 码 清单 5-14 示 范 了 其 用 法 。 


代码 清单 5-14 ” 枚 举 对 象 属性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = { 
name: "Adam", 
weather: "sunny", 
printMessages: function() { 
document .writeln("Hello " + this.name +". "); 
document .writeln("Today is " + this.weather + "."); 


} 





}5 


for (var prop in myData) { 
document .writeln("Name: " + prop + " Value: " + myData[prop]); 
} 


</script> 
</body> 
</html> 


for...in 循 环 代码 块 中 的 语句 会 对 myData 对 象 的 每 一 个 属性 执行 一 次 ,在 每 一 次 迭代 过 程 中 ， 
所 要 处 理 的 属性 名 会 被 赋 给 prop 变 量 。 例 中 使 用 类 数组 索引 语法 ( 即使 用 方 括号 [和 ] ) 获取 对 象 
的 属性 值 。 代 码 清 单 的 输出 结果 如 下 所 示 ( 格式 上 已 做 调整 ， 以 便 阅读 ): 
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Name: name Value: Adam 
Name: weather Value: sunny 


Name: printMessages Value: function () { document.writeln("Hello " + this.name + ". "); 
document .writeln("Today is " + this.weather + "."); } 


从 中 可 以 看 到 , PEAT TIE RE SIIB PR BOCAS HH OK To JavaScript (eh FE P2507 Tf dE 76 8 
方法 本 身 也 被 视 为 对 象 的 属性 ， 这 就 是 其 结果 。 

3. 增删 属性 和 方法 

就 算是 用 对 象 字面 量 生成 的 对 象 ， 也 可 以 为 其 定义 新 属性 。 代 码 清 单 5-15 即 为 一 例 。 


代码 清单 5-15 ”为 对 象 添加 新 属性 


«IDOCTYPE HTML» 




















«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<script type-"text/javascript"» 
var myData = { 
name: "Adam", 
weather: "sunny", 
] 
myData.dayOfWeek = "Monday"; 
</script> 
</body> 
</html> 
上 例 中 为 对 象 添加 了 一 个 名 为 dayofweek 的 新 属性 。 这 里 使 用 的 是 圆 点 表示 法 ( 用 句点 将 对 





象 和 属性 的 名 称 连接 在 一 起 )， 不 过 用 类 数组 索引 表示 法 也 没什么 不 可 以 。 
读者 看 到 此 处 可 能 会 猜 到 : 通过 将 属性 值 设 置 为 一 个 函数 也 能 为 对 象 添加 新 方法 。 代 码 清 
单 5-16 即 是 一 例 。 
代码 清单 5-16 ”为 对 象 添加 新 方法 
<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = { 
name: "Adam", 
weather: "sunny", 


J; 
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myData.sayHello = function() { 
document .writeln("Hello") ; 


}3 


</script> 
</body> 
</html> 


对 象 的 属性 和 方法 可 以 用 delete 关 键 字 删 除 ， 如 代码 清单 5-17 所 示 。 


代码 清单 5-17 ”删除 对 象 的 属 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = { 
name: "Adam", 
weather: "sunny", 





}; 


myData.sayHello = function() { 
document .writeln("Hello") ; 


h 


delete myData.name; 
delete myData["weather"]; 
delete myData.sayHello; 
«/script» 
«/body» 
«/html» 


4. 判断 对 象 是 否 具有 茶 个 属性 
可 以 用 in 表 达 式 判断 对 象 是 否 具 有 某 个 属 怕 


代码 清单 5-18 检查 对 象 是 否 具 有 某 个 属性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = { 
name: "Adam", 
weather: "sunny", 





}; 


var hasName = "name" in myData; 
var hasDate = "date" in myData; 


E， 如 代码 清单 5-18 所 示 。 
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document .writeln("HasName: " + hasName); 
document .writeln("HasDate: " + hasDate); 


</script> 


</body> 
</html> 


此 例 分 别 用 一 个 已 有 的 和 一 个 没有 的 属性 进行 测试 。hasName 变 量 的 值 会 是 true， 而 hasDate 
变量 的 值 会 是 false。 
5.5 使 用 JavaScript 运算 符 i5 
JavaScript 定 义 了 大 量 标准 运算 符 。 表 5-2 罗 列 了 最 常用 的 一 些 运算 符 。 


表 5-2 ”常用 的 JavaScript 运 算 符 












































运 算 符 说 — HH 

+H, =- 前 置 或 后 置 自 增 和 上 自 减 
+、-、*、/、% An. Wh. 3€. BRL RA 

6 €, oo 小 于 、 小 于 等 于 、 大 于 、 大 于 等 于 
ses ls 相等 和 不 相等 

===, l== 等 同和 不 等 同 

&&, | | ipt. HA 

= 赋值 

* 字符 串 连 接 








三 元 条 件 语句 





5.5.1 ”相等 和 等 同 运算 符 


相等 和 等 同 运算 符 需 要 特别 说 明 一 下 。 相 等 运算 符 会 尝试 将 操作 数 转换 为 同一 类 型 以 便 判断 是 
否 相 等 。 只 要 明白 其 工作 方式 , 这 就 是 一 个 很 方便 的 特性 。 代码 清单 5-19 示 范 了 相等 运算 符 的 用 法 。 


代码 清单 5-19 ”使 用 相等 运算 符 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
«script type="text/javascript"> 




















var firstVal = 5; 
var secondVal = "5"; 


if (firstVal == secondVal) { 
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document .writeln("They are the same"); 
} else { 

document .writeln("They are NOT the same"); 
} 


</script> 
</body> 
</html> 


这 段 脚 本 的 输出 结果 如 下 : 








They are the same 








此 例 中 JavaScript 先 将 两 个 操作 数 转换 为 同一 类 型 再 对 其 进行 比较 一 一 从 本 质 上 讲 , 相 等 运算 
符 测试 两 个 值 是 否 相等 , 不 管 其 类 型 。 如 果 想 判断 值 和 类 型 是 否 都 相同 ,那么 应 该 使 用 的 是 等 同 
运算 符 ( ===， 由 三 个 等 号 组 成 。 相 等 运算 符 是 由 两 个 等 号 组 成 )， 如 代码 清单 5-20 所 示 。 


代码 清单 5-20 ”使 用 等 同 运 算 符 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 





var firstVal = 5; 
var secondVal = "5"; 


if (firstVal === secondVal) { 
document .writeln("They are the same"); 
} else { 
document .writeln("They are NOT the same"); 


</script> 
</body> 
</html> 


此 例 中 等 同 运算 符 判定 两 个 变量 不 一 样 。 这 个 运算 符 不 会 进行 类 型 转换 ,这 有 段 脚本 的 输出 结 
有 果 如 下 所 示 : 





They are NOT the same 





提示 代码 清单 5-19 和 代码 清单 5-20 使 用 了 if 条 件 语 句 。 这 个 语句 先 对 一 个 条 件 进行 评估 ， 要 是 
true, 就 执行 代码 块 中 的 语句 。if 语 和 句 还 可 以 加 上 一 个 else 子 句 , 子 句 所 含 代码 块 
中 的 语句 会 在 条 件 为 false 的 情况 下 执行 。 
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JavaScript 基 本 类 型 ( 指 字符 串 和 数值 等 内 置 类 型 ) 的 比较 是 值 的 比较 ， 而 JavaScript 对 象 的 
比较 则 是 引用 的 比较 。 代 码 清单 5-21 展 示 了 JavaScript 处 理 对 象 的 相等 和 等 同 测试 的 方式 。 


代码 清单 5-21 ”对象 的 相等 和 等 同 测试 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 








var myDatai = { 
name: "Adam", 
weather: "sunny", 


var myData2 = { 
name: "Adam", 
weather: "sunny", 


var myData3 = myData2; 


var testi = myData1 == myData2; 
var test2 = myData2 == myData3; 
var test3 = myDatai === myData2; 
var test4 = myData2 === myData3; 


document .writeln("Test 1: "+ testi + " Test 2: " + test2); 
document .writeln("Test 3: "+ test3 + " Test 4: " + test4); 
</script> 
</body> 
</html> 


这 段 脚本 的 结果 如 下 : 





Test 1: false Test 2: true 


Test 3: false Test 4: true 





代码 清单 5-22 对 基本 类 型 变量 做 了 同样 的 测试 。 
代码 清单 5-22 ”基本 类 型 的 相等 和 等 同 测试 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
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<script type="text/javascript"> 


var myData1 = 5; 
var myData2 = "5"; 
var myData3 = myData2; 





var testi = myData1 == myData2; 
var test2 = myData2 == myData3; 
var test3 = myDatai === myData2; 
var test4 = myData2 === myData3; 


document .writeln("Test 1: "+ testi + " Test 2: " + test2); 
document .writeln("Test 3: "+ test3 + " Test 4: " + test4); 
</script> 
</body> 
</html> 


其 结果 如 下 : 








Test 1: true Test 2: true 


Test 3: false Test 4: true 





5.5.2 显 式 类 型 转换 


字符 串 连 接 运 算 符 (+ ) 比 加 法 运算 符 (也 是 + ) 优先 级 更 高 。 这 可 能 会 引起 混乱 ， 这 是 
因为 JavaScript 在 计算 结果 时 会 自动 进行 类 型 转换 ， 其 结果 未 必 跟 预期 一 样 。 代 码 清单 5-23 即 
是 一 例 。 


代码 清单 5-23 ”字符 串 连 接 运 算 符 的 优先 权 


<!DOCTYPE HTML» 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 











var myData1 = 5 + 5; 
var myData2 = 5 + "5"; 


" 


document .writeln("Result 1: 
document .writeln("Result 2: 


+ myData1); 
" + myData2) ; 
</script> 
</body> 
</html> 


其 结果 如 下 : 
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Result 1: 10 


Result 2: 55 











第 二 个 结果 正 是 混乱 所 在 。 原 想 的 可 能 是 加 法 运算 ,而 在 运算 符 优先 级 别 和 过 分 热心 的 类 型 
转换 这 两 个 因素 的 共同 作用 下 ,结果 却 被 诠释 成 了 字符 串 连 接 运 算 。 为 了 避免 这 种 局 面 ， 可 以 对 
值 的 类 型 进行 显 式 转换 ， 以 确保 执行 的 是 正确 的 运算 。 表 5-3 列 出 了 一 些 最 常用 的 类 型 转换 方法 。 
1. 将 数值 转换 为 字符 串 
如 果 想 把 多 个 数值 类 型 变量 作为 字符 串 连接 起 来 ， 可 以 用 toString 方 法 将 数值 转换 为 字符 
串 ， 如 代码 清单 5-24 所 示 。 


代码 清单 5-24 fi Number. toString Arik 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myDatai = (5).toString() + String(5); 
document .writeln("Result: " + myData1); 
</script> 
</body> 
</html> 


注意 此 例 中 先 把 数值 放 在 括号 中 然后 才 调 用 tostring 方 法 。 这 是 因为 要 想 调 用 number 类 型 定 
义 的 tostring 方 法 ， 必 须 先 让 JavaScript 将 字面 量 转换 为 一 个 numper 类 型 的 值 。 例 中 还 示范 了 与 调 
用 toString 方 法 等 效 的 另 一 种 做 法 ， 即 调用 String 函 数 并 将 要 转换 的 数值 作为 参数 传递 给 它 。 这 
两 种 做 法 的 作用 都 是 将 number 类 型 的 值 转换 为 string 类 型 ， 因 此 + 这 个 运算 符 会 被 用 来 进行 字符 
串 连 接 而 不 是 加 法 运算 。 这 上段 脚本 的 输出 结果 如 下 所 示 : 






































Result: 55 
将 数值 转换 为 字符 串 还 有 一 些 别 的 方法 , 它们 可 以 对 转换 方式 施加 更 多 控制 。 所 有 这 些 方 法 
在 表 5-3 中 都 有 简要 说 明 ， 它 们 都 是 number 类 型 定义 的 方法 。 
5-3 ”数值 到 字符 串 的 常用 转换 方法 















































5 X 说 OBB ik E 
toString() 以 十 进 制 形式 表示 数值 字符 串 
toString(2) 以 二 进 制 、 八 进 制 和 十 六 进 制 形式 表示 数值 字符 串 
toString(8) 
toString(16) 




















toFixed(n) 以 小 数 点 后 有 7 位 数字 的 形式 表示 实数 字符 串 
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( 续 ) 

方 法 CENT. i mH 
toExponential (n) 以 指数 表示 法 表示 数值 。 尾 数 的 小 数 点 前 后 分 别 有 1 位 数字 和 mw 位 数字 字符 串 
toPrecision(n) jn 位 有 效 数字 表示 数值 ， 在 必要 的 情况 下 使 用 指数 表示 法 字符 串 


— 





2. 将 字符 串 转换 为 数值 
与 前 述 需求 相反 ,有 时 需要 把 字符 串 转 换 为 数值 ， 以 便 进 行 加 法 运算 而 不 是 字符 串 连 接 。 这 


可 以 用 Number 孙 数 办 到 ， 如 代码 清单 5-25 所 示 。 
代码 清单 5-25 ”将 字符 串 转 换 为 数值 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 

















var firstVal = "5"; 
var secondVal = "5"; 


var result = Number(firstVal) + Number(secondVal); 


document .writeln("Result: " + result); 
</script> 
</body> 
</html> 


其 输出 结果 如 下 : 
Result: 10 


Number PR ZI AEDT FF AB A ZI UR aR, TEXT lflparseIntfllparseFloatPRZICE Jy 24 I, Ja 
面 这 两 个 函数 还 会 忽略 数字 字符 后 面 的 非 数 字 字 符 。 这 三 个 函数 的 说 明 见 表 5-4。 
表 5-4 ”字符 串 到 数值 的 常用 转换 函数 











BE XN 说 PA 
Number («str») 通过 分 析 指定 字符 串 ， 生 成 一 个 整数 或 实数 值 
parseInt(«str») 通过 分 析 指定 字符 串 ， 生 成 一 个 整数 值 
parseF loat (<str>) 通过 分 析 指定 字符 串 ， 生 成 一 个 整数 或 实数 值 




















5.6 ”使 用 数组 
JavaScript 数 组 的 工作 方式 与 大 多 数 编程 语言 中 的 数组 类 似 。 代 码 清单 -26 示 范 了 如 何 创建 和 
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填充 数组 。 
代码 清单 5-26 创建 和 填充 数组 











<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 





var myArray = new Array(); 
myArray[0] = 100; 
myArray[1] = "Adam"; 
myArray[2] = true; 


</script> 
</body> 
</html> 


例 中 通过 调用 new Array() 创 建 一 个 新 的 数组 。 这 是 一 个 空 数组 ， 它 被 赋 给 变量 myArray。 后 
面 的 语句 给 数组 中 的 几 个 索引 位 置 设置 了 值 。 

此 例 有 几 处 需要 说 明 一 下 。 首先 , 创建 数组 的 时 候 不 需要 声明 数组 中 元 素 的 个 数 。JavaScript 
数组 会 自动 调整 大 小 以 便 容纳 所 有 元 素 。 第 二 , 不 必 声 明 数组 所 含 数据 的 类 型 。JavaScript 数 组 可 
以 混合 包含 各 种 类 型 的 数据 。 例 中 分 别 把 一 个 数值 、 一 个 字符 串 和 一 个 布尔 值 赋 给 了 不 同 的 数组 
元 素 。 


5.6.1 使 用 数组 字面 量 
使 用 数组 字面 量 ， 可 以 在 一 条 语句 中 创建 和 填充 数组 ， 如 代码 清单 5-27 所 示 。 
代码 清单 5-27 使 用 数组 字面 量 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 



































var myArray = [100, "Adam", true]; 


</script> 
</body> 
</html> 


此 例 通过 在 一 对 方 括号 ( [和 ] ) 之 间 指 定 所 需 数组 元 素 的 方式 创建 了 一 个 新 数组 ， 并 将 其 赋 


给 变量 myArray。 
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5.6.2 ” 读 取 和 修改 数组 内 容 


要 读 取 指定 索引 位 置 的 数组 元 素 值 ， 应 使 用 一 对 方 括 号 ( [和 ] ) 并 将 索引 值 放 在 方 括号 间 ， 
如 代码 清单 5-28 所 示 。JavaScript 数 组 的 索引 值 从 0 开始 。 


代码 清单 5-28 ” 读 取 指定 索引 位 置 的 数组 元 素 值 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myArray = [100, "Adam", true]; 
document .writeln("Index 0: " + myArray[0]) ; 
</script> 
</body> 
</html> 


要 修改 JavaScript 数 组 中 指定 位 置 的 数据 , 只 消 将 新 值 赋 给 该 索引 位 置 的 数组 元 素 即 可 。 与 普 
通 变 量 一 样 ， 改 变数 组 元 素 的 数据 类 型 没有 任何 问题 。 代 码 清 单 5-29 示 范 了 如 何 修改 数组 内 容 。 


代码 清单 5-29 ”修改 数组 内 容 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myArray = [100, "Adam", true]; 
myArray[0] = "Tuesday"; 
document .writeln("Index 0: " + myArray[0]); 
</script> 
</body> 
</html> 


此 例 将 一 个 字符 串 赋 给 了 数组 第 0 位 的 元 素 ， 该 元 素 原来 保存 的 是 一 个 数值 。 
5.6.3 ” 枚 举 数组 内 容 


可 以 用 for 循 环 枚 举 数组 内 容 。 代 码 清 单 5-30 示 范 了 如 何 使 用 循环 语句 显示 一 个 简单 数组 的 
内 容 。 
代码 清单 5-30” 枚 举 数 组 内 容 


<!DOCTYPE HTML> 
<html> 
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<head> 
<title>Example</title> 
</head> 
<body> 
«script type="text/javascript"> 
var myArray = [100, "Adam", true]; 
for (var i = 0; i « myArray.length; i++) { 
document .writeln("Index "+ i+ ": " + myArray[i]); 
} 


</script> 
</body> 
</html> 


JavaScript 中 的 循环 语句 的 工作 方式 与 大 多 数 语言 中 的 类 似 。 要 确定 数组 中 的 元 素 个 数 可 以 使 
用 其 length 属 性 。 代 码 清单 的 输出 结果 如 下 : 




















Index 0: 100 Index 1: Adam Index 2: true 


5.6.4 ”使 用 内 置 的 数组 方法 
JavaScript 中 的 Array 对 象 定义 了 许多 方法 。 表 5-5 罗 列 了 一 些 最 常用 的 方法 。 
#5-5 ”常用 数组 方法 











































































































方 ” ”法 说 明 返回 
concat(«otherArray») “将 数组 和 参数 所 指数 组 的 内 容 合并 为 一 个 新 数组 。 可 指定 多 个 数组 数组 
join(<separator>) 将 所 有 数组 元 素 连 接 为 一 个 字符 串 。 各 元 素 内 容 用 参数 指定 的 字符 分 隔 字符 串 
pop() 把 数组 当做 栈 使 用 ， 删 除 并 返回 数组 的 最 后 一 个 元 素 对 象 
push(<item>) 把 数组 当做 栈 使 用 ， 将 指定 的 数据 添加 到 数组 中 void 
reverse() 就 地 反 转 数组 元 素 的 次 序 数组 
shift() 类 似 pop， 但 操作 的 是 数组 的 第 一 个 元 素 对 象 
slice(«start»,«end») 返回 一 个 子 数 组 数组 
sort() 就 地 对 数组 元 素 排序 数组 
unshift (<item>) 类 似 pusn， 但 新 元 素 被 搬 到 数组 的 开头 位 置 void 


5.7 ”处 理 错误 


JavaScript 用 try.. .catch 语 句 处 理 错 误 。 读者 在 阅读 本 书 时 一 般 不 用 操心 错误 处 理 方面 的 事 ， 
因为 本 书 着 重 讲解 的 是 HTML5 特 性 而 不 是 基础 编程 技能 。 代 码 清单 5-31 示 范 了 这 个 语句 的 用 法 。 


代码 清单 5-31 异常 处 理 
«IDOCTYPE HTML» 
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<html> 
<head> 


<title>Example</title> 
</head> 


<body> 


«script type="text/javascript"> 
try { 
var myArray; 


for (var i = 0; i < myArray.length; i++) { 
document .writeln("Index "+ i + ": " + myArray[i]); 
j 
} catch (e) { 


document.writeln("Error: " 
) 
</script> 


</body> 
</html> 


+e); 





这 段 脚 本 中 的 问题 很 常见 : 试图 使 用 未 恰当 初始 化 的 变量 。 可 能 会 引发 错误 的 代码 被 包装 在 
try 子 句 中 。 如 果 没 有 发 生 错 误 ， 那么 这 些 语句 会 正常 执行 ，catch 子 句 会 被 忽略 。 

但 是 如 果 有 错误 发 生 ， 那 么 try 子 句 中 语句 的 执行 将 立即 停止 ， 控 制 权 转 移 到 catch 子 句 中 。 
发 生 的 错误 由 一 个 Error 对 象 描 述 , 它 会 被 传递 给 catch 子 句 。 表 5-6 显 示 了 Error 对 象 定义 的 









































属性 。 
表 5-6 ”Error 对 象 
属 性 说 明 返 回 
message 对 错误 条 件 的 说 明 字符 串 
us 错误 的 名 称 ， 默 认为 Error 字符 串 
number 该 错误 的 错误 代号 ( 如果 有 的 话 ) 数值 








catch 子 名 提供 了 一 个 从 错误 中 恢复 或 在 错误 发 生 后 进行 一 些 清 理工 作 的 机 会 。 如 果 不 管 是 
和 否 发 生 错 误 都 执行 一 些 语句 , 那么 可 以 加 上 一 条 finally 子 句 并 将 它们 置 于 其 中 , 如 代码 清单 5-32 
所 示 。 




















代码 清单 5-32 ”使 用 finally 子 名 
<!DOCTYPE HTML> 
<html> 
<head> 


<title>Example</title> 
</head> 


<body> 


<script type="text/javascript"> 
try { 
var myArray; 


for (var i = 0; i < myArray.length; i++) { 
document .writeln("Index " 


} catch (e) { 


+i +": " + myArray[i]); 
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document .writeln("Error: " + e); 
} finally { 
document .writeln("Statements here are always executed"); 
} 
</script> 
</body> 
</html> 


5.8 比较 undefined 4H null {A 


JavaScript 中 有 两 个 特殊 值 : undefined 和 nul1， 在 比较 它们 的 时 候 需 要 留心 。 在 读 取 未 赋值 omm 
的 变量 或 试图 读 取 对 象 没有 的 属性 时 得 到 的 就 是 undefined 值 。 代 码 清单 5-33 示 范 了 JavaScript 中 
undefined 的 用 法 。 


代码 清单 5-33 ”特别 的 undefined 值 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 
var myData = { 
name: "Adam", 
weather: "sunny", 








B 
document.writeln("Prop: " + myData.doesntexist); 
</script> 
</body> 
</html> 


清单 的 输出 如 下 : 





Prop: undefined 








JavaScript 怪 就 怪 在 又 定义 了 一 个 特殊 值 nul1， 这 个 值 与 undefined 略 有 不 同 。 后 者 是 在 未 定 
义 值 的 情况 下 得 到 的 值 ， 而 前 者 则 用 于 表示 已 经 赋 了 一 个 值 但 该 值 不 是 一 个 有 效 的 object 、 
string, numberzkbooleanfH ( 也 就 是 说 所 定义 的 是 一 个 无 值 [no value ])。 为 了 澄清 这 个 问题 ， 
代码 清单 5-34 先 后 使 用 了 undefined 和 null 以 展示 其 不 同 效 果 。 


代码 清单 5-34 使 用 undefined 和 null 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
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<body> 
<script type="text/javascript"> 


var myData = { 
name: "Adam", 


h 


document.writeln("Var: " + myData.weather) ; 
document .writeln("Prop: " + ("weather" in myData)); 


cS 


myData.weather 
document.write 
document.write 


"sunny"; 
" 


"Var: " + myData.weather); 
"Prop: " + ("weather" in myData)); 


m= wd 





myData.weather - null; 
document.writeln("Var: " + myData.weather); 
document.writeln("Prop: " + ("weather" in myData)); 




















</script> 
</body> 
</html> 


例 中 创建 了 一 个 对 象 ， 然 后 试图 读 取 其 weather 属 性 ， 而 该 属性 在 这 段 代码 的 开头 部 分 尚未 








定义 : 
document .writeln("Var: " + myData.weather) ; 
document .writeln("Prop: " + ("weather" in myData)); 








此 时 weather 属 性 还 不 存在 ， 因 此 表达 式 myData.weather 的 值 为 undefined， 而 且 用 in 关键 字 
判断 对 象 是 否 具有 这 个 属性 时 得 到 的 结果 是 false。 这 两 条 语句 的 输出 如 下 : 








Var: undefined 


Prop: false 





例 中 随后 给 weather 属 性 赋 了 一 个 值 ， 其 效果 是 将 该 属性 添加 到 对 象 中 


myData.weather = "sunny"; 
document .writeln("Var: " + myData.weather) ; 
document .writeln("Prop: " + ("weather" in myData)); 


现在 重新 读 取 该 属性 的 值 并 看 看 对 象 是 否 有 了 该 属性 。 不 出 所 料 , 对 象 的 确定 义 了 该 属性 且 
值 为 sunny: 























Var: sunny 


Prop: true 





接 下 来 ,把 该 属性 的 值 设置 为 null: 


myData.weather = null; 
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其 作用 很 明确 : 对 象 依然 具有 该 属性 , 但 程序 员 表示 它 没有 值 。 重 复 前 面 的 测试 , 结果 如 下 : 


Var: null 


Prop: true 





5.8.1 检查 变量 或 属性 是 否 为 undefined 或 null 


如 果 想 检查 某 属性 是 否 为 nu11 或 undefined ( 不管 是 哪 一 个 )， 那 么 只 要 像 代码 清单 5-35 这 样 
使 用 if 语 句 和 逻辑 非 运 算 符 (1 ) 即 可 : 


代码 清单 5-35 ”检查 属性 是 否 为 hull 或 undefined 








<!DOCTYPE HTML> 
<html> 
<head> 


<title>Example</title> 


</head> 
<body> 


<script type="tex 


var myData = { 


name: "Adam", 


city: nul 


h 


if (ImyData 
documen 
} else { 
documen 
} 


if (!myData 
documen 
} else { 
documen 
} 


</script> 
</body> 
</html> 








.name) { 
t.write 


t.write 


.city) { 
t.write 








t.write 


Ln 


Ln 


Ln 


Ln 


"name is NO 





"city is NO 


t/javascript"> 


"name IS null or undefined"); 


null or undefined"); 


"city IS null or undefined"); 





null or undefined"); 





这 种 办 法 借助 了 JavaScript 执 行 的 类 型 转换 , 有 了 这 种 转换 , 例 中 检查 的 值 会 被 当做 布尔 值 处 
理 。 如 果 变 量 或 属性 为 null 或 undefined， 则 转换 而 得 的 布尔 值 为 false。 





5.8.2 区 分 null 和 undefined 


在 比较 两 个 值 时 ， 所 用 办 法 应 视 需 要 而 定 。 如 果 想 同等 对 待 undefined 值 和 nul1 值 ， 那 么 应 
该 使 用 相等 运算 符 ( == )， 让 JavaScript 进 行 类 型 转换 。 此 时 值 为 undefined 的 变量 会 被 认为 与 值 为 
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null 的 变量 相等 。 如 果 要 区 分 nul1 和 undefined， 则 应 使 用 等 同 运算 符 ( === )。 代 码 清单 5-36 包 括 
了 这 两 种 比较 。 


代码 清单 5-36 ”null 和 undefined 值 的 相等 和 等 同比 较 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<script type="text/javascript"> 





var firstVal = null; 
var secondVal; 


var equality = firstVal == secondVal; 
var identity = firstVal === secondVal; 


document .writeln("Equality: " + equality); 
document .writeln("Identity: " + identity); 


</script> 


</body> 
</html> 


这 段 脚 本 的 输出 如 下 : 
Equality: true 


Identity: false 





5.9 常用 的 JavaScript 工具 
有 很 多 工具 可 用 来 简化 JavaScript 编 程 工作 ， 其 中 有 两 个 特别 值得 一 提 。 


5.9.1 使 用 JavaScript 调试 器 


现代 浏览 器 都 配备 了 精良 的 JavaScript 调 试 器 〈 或 以 捅 件 的 方式 支持 这 一 功能 ， 如 Mozilla 
Firefox 的 插件 Firebug )。 它 们 可 以 用 来 设置 断 点 、 探 查 错误 和 逐 名 执行 脚 本 。 在 遇 到 脚本 方面 的 
问题 时 首先 应 该 想到 的 就 是 向 调试 器 求助 。 我 喜欢 的 浏览 需 是 谷歌 的 Chrome ， 并 能 熟练 应 用 其 
内 置 调试 器 。 不 过 在 碰 到 特别 难 缠 的 问题 时 , 我 会 使 用 Firefox 上 的 Firebug。 这 个 调试 器 在 对 付 复 
杂 情 况 时 显得 更 为 强大 。 




















5.9.2 ”使 用 JavaScript Æ 
使 用 JavaScript 最 简便 的 方式 是 使 用 革 种 JavaScript 工 具 包 或 库 。 这 种 工具 包 多 如 牛 毛 ， 其 中 
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有 两 种 值得 专门 推荐 一 下 。 第 一 种 ,也 是 我 最 熟悉 的 一 种 , 是 jQuery。jQuery 及 其 配套 程序 库 jQuery 
UI 非常 流行 , 其 开发 非常 活跃 , 具有 许多 很 有 用 的 特性 。 有 了 jQuery, JavaScript 开 发 工作 要 轻松 、 
TE XE s 

我 推荐 的 另 一 种 工具 包 ， 是 jQuery 的 主要 竞争 对 手 Dojo。 其 功能 堪 比 jQuery， 支 持 完善 ， 而 
且 应 用 广泛 。 我 对 Dojo 没 有 jQuery 熟悉 ， 不 过 它 给 我 留 下 了 很 好 的 印象 。jQuery 和 Dojio 可 以 分 别 
从 jquery.com 和 http:/dojotoolkit,org 下 载 。 请 别 说 我 王 婆 卖 瓜 ， 读 者 如 果 想 详细 了 解 jQuery， 可 以 
考虑 读 一 下 我 在 Apress 出 版 的 Pro jQuery. 


5.10 “小 结 omm 


本 章 介 绍 了 本 书 通 篇 都 要 用 到 的 JavaScript 核 心 特性 。JavaScript 是 HTML5 的 有 机 组 成 部 分 。 
掌握 一 些 这 门 语言 的 基础 知识 和 用 法 非常 必要 。 























HTML 元 素 








至 此 读者 应 该 已 经 准备 妥当 ， 对 相关 领域 的 新 情况 已 有 所 了 解 ， 可 以 正式 开始 学 习 HTMLS 
了 。 本 篇 介绍 的 是 HTML 元 素 ， 包 括 HTMLS 新 增 或 有 所 改动 的 元 素 。 


HTML5 元 素 背 景 知识 











HTML5 定 义 的 各 种 元 素 将 从 下 一 章 开始 介绍 。 许 多 元 素 在 HTML4 中 也 存在 ,但 是 很 多 情况 
下 元 素 的 含义 已 经 发 生 了 变化 , 或 者 其 使 用 方式 已 经 有 所 不 同 。 在 介绍 这 些 元 素 之 前 , 我 想 先 介 
绍 一 下 它们 的 背景 知识 ， 为 后 续 各 章 英 定 基础 。 知 道 如 何 使 用 这 些 元 素 与 理解 其 含义 同等 重要 。 


6.1 语义 与 呈现 分 离 


HTML5S 中 的 一 大 主要 变化 是 基本 信念 方面 的 : 将 元 素 的 语义 与 元 素 对 其 内 容 呈 现 结果 的 影 
响 分 开 。 从 原理 上 讲 这 的 确 合乎 情理 。HTML 元素 负责 文档 内 容 的 结构 和 含义 ， 内 容 的 呈现 则 由 
应 用 于 元 素 上 的 CSS 样 式 控制 。HTML 文 档 的 用 户 未 必 都 需要 显示 它们 ， 不 掺 合 呈现 方面 的 事 有 
助 于 简化 HTML 的 处 理 以 及 从 中 自动 提炼 含义 。 

HTML5 中 新 增 的 大 多 数 元 素 都 有 具体 的 含义 。 例 如 ，article 元 素 可 以 用 来 表示 适 于 联合 供 
稿 的 独立 成 篇 的 内 容 ， 而 gure 元 素 表示 的 自然 是 图 片 。 

HTML4 中 的 许多 元 素 产生 在 呈现 与 含义 分 离 观 念 形成 之 前 。 这 造成 了 一 种 碍 俯 局 面 。 以 b 元 
素 为 例 , 在 HTML5 之 前 的 版 本 中 , b 元 素 会 指示 浏览 器 以 粗 体 显 示 其 开始 和 结束 标签 之 间 的 内 容 。 
而 HTML5 不 再 提倡 纯 属 呈现 因素 的 元 素 ， 所 以 给 b 元 素 下 了 个 新 定义 ( 以 下 内 容 摘 自 w3c.org 的 
“HTML: The Markup Language” ): 

b 元 素 表示 一 段 文字 (将 这 段 文字 从 周围 文字 中 廿 现 出 来 并 不 表示 特别 的 强调 或 重 

要 性 ) ， 习 惯 上 使 用 粗 体 呈 现 ， 其 使 用 场合 包括 文章 提要 中 的 关键 字 或 产品 评论 中 的 产 

品名 称 等 。 

DOF SA RECA EL: b 元 素 告 诉 浏览 器 用 粗 体 显 示 文 字 。b 元 素 没有 任何 语义 , 它 
只 起 呈现 方面 的 作用 。 这 个 圆滑 的 定义 透露 了 HTML5 的 一 个 重要 信号 : 我 们 处 在 过 渡 时 期 。 保 留 
那些 旧 元 素 是 因为 它们 用 得 实在 太 广 泛 了 。 让 HTMLS 抛 弃 那 些 HTML4 元 素 是 不 切实 际 的 ， 那 样 做 
无 疑 会 减缓 其 被 采用 的 进程 。 这 样 一 来 ，HTML5 就 成 了 一 个 “ 双 速 ”标准 。 一 部 分 元 素 ( 特别 是 
那些 新 元 素 ) 只 有 语义 方面 的 作用 ; 而 另 一 部 分 元 素 ( 特别 是 那些 名 字 只 有 一 个 字母 的 ) 因为 招牌 
如 此 之 老 ， 新 标准 在 呈现 与 含义 分 离 的 原则 上 也 只 得 向 其 届 服 一 一 尽管 它 不 愿 坦然 承认 这 一 点 。 

从 下 一 章 开始 , 在 阅读 元 素 说 明 的 时 候 , 对 新 思维 和 老路 子 之 间 的 这 种 敏感 关系 最 好 要 心里 
有 数 。 它 确实 有 助 于 解释 读者 碰 到 的 一 些 琐 碎 的 怪 象 。 
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我 的 建议 是 : 在 语义 方面 要 求 严 格 点 不 为 过 ,只 要 有 条 件 , 尽量 名 用 那些 具有 浓重 呈现 意味 
或 纯粹 起 呈现 作用 的 元 素 。 定义 一 个 自 定义 类 然后 借助 它 应 用 所 需 样式 并 不 复杂 。 只 要 做 到 样式 
的 采用 是 以 内 容 类 型 为 依据 而 不 是 随心 所 欲 ， 你 至 少 也 保持 了 一 颗 向 着 语义 的 心 。 


6.2 ”元 素 选用 原则 


就 算 撤 开 呈现 方面 的 事 不 论 ， HTML5 规 范 仍然 存在 一 些 含混 的 地 方 。 有 些 元 素 过 于 一 般 化 ， 
乍 一 看 可 能 不 招 人 喜欢 。 

那些 元 素 固 然 一 般 化 ， 但 这 是 因为 用 HTML 元 素来 标记 的 内 容 类 型 实在 太 多 了 。 我 写 的 大 多 数 
都 是 本 书 这 样 的 东西 ， 所 以 见 到 section 、article 、heading 和 figure 这 些 术 语 的 时 候 ， 想 到 的 是 Apress 出 
版 社 在 结构 和 样式 方面 对 作者 所 提 的 要 求 。 换 了 别 的 内 容 , 同一 批 术 语 的 含义 却 又 不 一 样 了 。 例如 ， 
技术 规范 、 合 同和 博客 文章 都 具有 section， 但 这 个 术语 在 三 种 情况 下 的 含义 截然 不 同 。 我 们 没有 为 
书籍 、 技 术 规范 、 合 同和 博客 文章 中 的 section 各 自 定 义 一 个 术语 ， 而 是 使 用 一 个 通用 的 术语 ， 附 加 
一 定 的 解释 。 在 选择 用 来 标记 内 容 的 元 素 方 面 我 给 读者 总 结 了 几 条 原则 , 接 下 来 我 们 就 来 逐一 说 明 。 






































6.2.1 少 亦 可 为 多 


开发 者 在 使 用 元 素 的 时 候 容 易 忘乎所以 , 把 文档 弄 得 标记 密布 。 标 记 只 应 该 应 内 容 对 语义 的 
需要 使 用 。 不 需要 定义 复杂 标题 也 就 不 需要 使 用 ngroup 元 素 〈 介 绍 见 第 10 章 )， 只 有 那些 引文 比 
较 重 要 的 文档 ( 如 期 刊 文章 ) 才 需 要 用 cite 元 素 (介绍 见 第 8 章 ) 标记 的 详细 引文 。 

判断 该 用 多 少 标记 需要 经 验 。 有 条 经 验 法 则 是 : 问 问 自己 打算 如 何 发 挥 一 个 元 素 的 语义 作用 ， 
如 果 不 能 马上 答 出 就 不 用 这 个 元 素 。 
































6.2.2 ” 别 误 用 元 素 


每 个 元 素 针对 的 是 一 种 特定 类 型 的 内 容 一 一 即便 像 b 元 素 这 类 纯 属 呈现 用 途 的 元 素 也 是 如 
此 。 对 内 容 进行 标记 时 ， 只 宜 将 元 素 用 于 它们 原 定 的 用 途 , 不 要 创造 自 有 的 语义 。 如 果 找 不 到 适 
合 自 己 所 要 含义 的 元 素 ， 可 以 考虑 使 用 通用 元 素 ( 如 span 或 div )， 并 且 用 全 局 属性 class 表 明 其 
含义 。CSS 样 式 不 是 类 属性 唯一 的 用 途 。 


















































6.2.3 ”具体 为 佳 ， 一 以 贯 之 


用 来 标记 内 容 的 元 素 应 该 选择 最 为 具体 的 那个 。 如 果 已 有 元 素 能 恰当 表明 内 容 的 类 型 ,就 不 
要 使 用 通用 元 素 。HTML4 中 存在 一 种 依赖 div 元 素 ( 见 第 9 章 ) 构建 页 面 结构 的 倾向 ， 其 缺陷 在 
于 它们 的 语义 并 非 显 而 易 见 。 有 些 人 或 许 会 定义 一 个 名 为 article 的 类 ， 并 且 厌 以 应 用 各 种 样式 ， 
但 是 这 样 做 所 传达 出 的 含义 无 法 与 使 用 article 元 素 相提并论 。 

同样 ， 同 一 个 元 素 的 使 用 在 整个 页 面 、 网 站 或 Web 应 用 系统 上 要 保持 一 致 。 对 于 作者 来 说 ， 
他 们 以 后 修改 自己 的 HTML 文 档 的 工作 可 以 因此 更 加 轻松 ,对 于 要 处 理 HTML 文档 的 其 他 人 亦 然 。 
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6.2.44 ”对 用 户 不 要 想当然 


有 人 可 能 觉得 
































HTML 文 档 的 用 户 关 心 的 只 是 它 在 浏览 右 中 的 呈现 结果 , 所 以 不 用 为 标记 的 语 





义 准 确 性 劳 神 。 呈现 与 语义 分 离 原 则 的 目的 完全 是 为 了 让 HTML 文 档 更 易于 程序 化 处 理 ， 所 以 随 
着 HTML5 的 采用 和 实现 愈加 广泛 , HTML 内 容 的 这 种 使 用 会 日 益 增多 。 如果 不 关心 标记 的 准确 性 


和 一 致 性 ， 这 样 的 HTML 文 档 处 型 


6.3 元素 说 明 体 例 











起 来 更 为 困难 ， 用 户 能 为 其 找到 的 用 处 也 很 有 限 。 


本 书 在 介绍 每 一 个 元 素 时 ， 都 会 列 出 一 个 摘要 表 ， 表 中 井 括 了 与 该 元 素 相关 的 要 点 ,读者 在 
制作 HTML 文 档 时 可 以 回头 参考 一 下 。 表 6-1 是 这 种 摘要 表 的 一 个 例子 。 它 介绍 的 是 用 来 表示 有 序 


列表 的 ol 元 素 (HTML 列 表 详 见 第 9 章 )。 


元 素 
元 素 类 型 











允许 具有 的 父 元 素 





内 容 
标签 用 法 




















在 HTMLS9 























任何 可 以 包含 流 元 素 的 元 素 
start, reversed#lltype 


是 否 为 HTML5 新 增 
reversed] l'EJÉHTMLS 





习惯 样式 





摘要 表 中 的 信息 包括 : W 
签 应 该 怎样 使 用 ， 默 认 呈 现 检 























又 得 以 恢复 ， 不 过 其 
ol { display: block; 
margin-before: 1em; margin-after: 1em; 








margin-start: 0; margin-end: 0; 
padding-start: 40px; } 








PP 新 增 的 。 在 HTML4 中 已 不 赞成 使 用 的 start 和 type 属 性 在 HTML5 
含义 变 成 了 语义 〈 而 不 是 呈现 ) 方面 的 。compact 属 性 不 再 使 用 
ist-style-type: decimal; 












































了 

















bh 些 元 素 可 成 为 该 元 素 的 父 元 素 , 该 元 素 可 以 包含 什么 类 型 的 内 容 , 标 
为 HTML5 新 增 或 在 HTML5 中 发 生 了 什么 变化 。 关 于 




















允许 具有 什么 父 元 素 和 内 容 的 信息 ,其 依据 是 第 3 章 介绍 过 的 元 素 类 型 ( 主要 是 流 元 素 和 短语 元 素 )。 


6.4 TARH 


接 下 来 的 表 可 证 读者 跑马 观 花 地 认识 一 下 后 面 各 章 将 要 介绍 的 所 有 HTML5 元 素 。 


6.4.1 文档 和 元 数据 元 素 








表 6-2 总 结 的 是 将 在 第 7 章 详 细 介 绍 的 文档 和 元 数据 元 素 。 其 用 途 包括 创建 HTML 文 档 的 上 
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层 建筑 ， 向 浏览 器 说 明文 档 的 情况 ， 定 义 脚 本 程序 和 CSS 样 式 ， 提 供 浏 览 器 禁用 脚本 时 要 显示 
的 内 容 。 





表 6-2 ”文档 和 元 数据 元 素 






























































元 # 说 明 类 型 新 增 或 有 无 变化 
base 设置 相对 URL 的 基础 元 数据 无 变化 
body 表示 HTML 文档 的 内 容 无 有 变化 
DOCTYPE 表示 HTML 文 档 的 开始 无 有 变化 
head 包含 文档 的 元 数据 无 无 变化 
html 表示 文档 中 HTML 部 分 的 开始 无 有 变化 
link 定义 与 外 部 资源 (通常 是 样式 表 或 网 站 图 标 ) 的 关系 元 数据 有 变化 
meta 提供 的 信息 元 数据 有 变化 
noscript 包含 浏览 器 禁用 脚本 或 不 支持 脚本 时 显示 的 内 容 元 数据 、 短 语 无 变化 
script 定义 脚本 程序 ， 可 以 是 文档 内 纶 的 也 可 以 是 外 部 文件 中 的 元 数据 、 短 语 有 变化 
style 定义 CSS 样 式 元 数据 有 变化 
title 设置 文档 标题 元 数据 无 变化 





6.4.2 文本 元 素 
文本 元 素 用 来 为 内 容 提供 基本 的 结构 和 含义 。 表 6-3 总 结 的 这 些 元 素 将 在 第 8 章 详 细 介 绍 
表 6-3 MATH 

































































T X 说 明 类 型 新 增 或 有 无 变化 
a 生成 超 链接 短语 、 流 有 变化 
abbr 缩 略 语 短语 无 变化 
b 不 带 强调 或 着 重 意味 地 标记 一 段 文字 短语 有 变化 
br 表示 换行 短语 无 变化 
cite 表示 其 他 作品 的 标题 短语 有 变化 
code 表示 计算 机 代码 片段 短语 无 变化 
del 表示 从 文档 中 删除 的 文字 短语 、 流 新 增 
dfn 表示 术语 定义 短语 无 变化 
em 表示 着 重 强调 的 一 段 文字 短语 无 变化 
i 表示 与 周边 内 容 秉 性 不 同 的 一 段 文字 ， 例 如 来 自 男 一 种 语言 的 词语 短语 有 变化 
ins 表示 加 入 文档 的 文字 短语 、 流 无 变化 
kbd 表示 用 户 输入 内 容 短语 无 变化 
mark 表示 一 段 因为 与 上 下 文中 另 一 词语 相关 而 被 突出 显示 的 内 容 短语 新 增 

q 表示 引 自 他 处 的 内 容 短语 无 变化 
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(EE) 

m 素 说 8j 类 型 新 增 或 有 无 变化 
Tp 与 Tuby 元 素 结合 使 用 ， 标 记 括 号 短语 新 增 
rt 与 zuby 元 素 结合 使 用 ， 标 记 注音 符号 短语 新 增 
ruby 表示 位 于 表意 文字 上 方 或 右 方 的 注音 符号 短语 新 增 

s 表示 文字 已 不 再 准确 短语 有 变化 
samp 表示 计算 机 程序 的 输出 内 容 短语 无 变化 
small 表示 小 号 字体 内 容 短语 有 变化 
Span 个 没有 自己 的 语义 的 通用 元 素 。 可 以 用 在 希望 应 用 一 些 全 局 属性 却 ”短语 无 变化 

又 不 想 引 入 额外 语义 的 情况 

strong 表示 重要 内 容 短语 无 变化 
sub 表示 下 标 文字 短语 无 变化 
Sup 表示 上 标 文字 短语 无 变化 
time 表示 时 间或 日 期 短语 新 增 

u 不 带 强调 或 着 重 意 味 地 标记 一 段 文字 短语 有 变化 
var 表示 程序 或 计算 机 系统 中 的 变量 短语 无 变化 
wbr 表示 可 安全 换行 的 地 方 短语 新 增 

6.4.8 ”对 内 容 分 组 
表 6-4 中 的 元 素 用 来 将 相关 内 容 分 组 ， 其 详细 介绍 见 第 9 章 。 
表 6-4 ”用 于 分 组 的 元 素 

m X 说 明 类 型 ”新 增 或 有 无 变化 
blockquote ”表示 引 自 他 处 的 大 段 内 容 流 无 变化 
dd 用 在 dl 元 素 之 中 ， 表 示 定 义 无 无 变化 
div 一 个 没有 任何 既定 语义 的 通用 元 素 ， 是 span 元 素 在 流 元 素 中 的 对 应 物 流 无 变化 
dl 表示 包含 一 系列 术语 和 定义 的 说 明 列表 流 无 变化 
dt 用 在 dl 元 素 之 中 ， 表 示 术 语 无 无 变化 
figcaption 表示 igure 元 素 的 标题 无 新 增 
figure 表示 图 片 流 新 增 
hr 表示 段落 级 别 的 主题 转换 流 有 变化 
li 用 在 ul 、ol 和 menu 元 素 中 ， 表 示 列 表 项 无 有 变化 
ol 表示 有 序列 表 流 有 变化 
p 表示 段落 流 有 变化 
pre 表示 其 格式 应 被 保留 的 内 容 流 无 变化 
ul 表示 无 序列 表 流 有 变化 











644 划分 内 容 


表 6-5 中 的 元 素 用 于 划分 内 容 ， 证 每 个 概念 、 观 点 或 主题 彼此 分 隔 开 。 它 们 中 有 许多 是 新 增 
的 。 这 些 元 素 为 分 离 元 素 的 含义 和 外 观 做 了 大 量 基 础 性 工作 。 第 10 章 详细 介绍 了 这 些 元 素 。 


表 6-5 ”用 于 划分 内 容 的 元 素 








































































































元 5 说 明 类 B 新 增 或 有 无 变化 
address 表示 文档 或 article 的 联系 信息 流 新 增 
article 表示 一 段 独立 的 内 容 流 新 
aside 表示 与 周边 内 容 稍 有 牵涉 的 内 容 流 新 增 
details 生成 一 个 区 域 ， 用 户 将 其 展开 可 以 获得 更 多 细节 知识 流 新 增 
footer 表示 尾部 流 新 增 
h1~h6 表示 标题 流 无 变化 
header 表示 首部 流 新 
hgroup 将 一 组 标题 组 织 在 一 起 ， 以 便 文档 大 纲 只 显示 其 中 第 一 个 标题 流 新 
nay 表示 有 意 集中 在 一 起 的 导航 元 素 流 新 
Section 表示 一 个 重要 的 概念 或 主题 流 新 增 
summary 用 在 details 元 素 中 ， 表 示 该 元 素 内 容 的 标题 或 说 明 无 新 增 





6.4.5 制 表 


表 6-6 中 的 元 素 用 于 制作 显示 数据 的 表格 。 表 格 在 HTML5 中 的 主要 变化 是 不 能 


面 布局 ， 这 项 工作 交 给 了 将 在 第 21 章 介绍 的 CSS 布 局 特性 。 


表 6-6 ”表格 元 素 


























了 用 来 控制 页 





元 素 说 — BB 类 m 新 增 或 有 无 变化 
caption 表示 表格 标题 无 有 变化 
col 表示 一 列 无 有 变化 
colgroup 表示 一 组 列 无 有 变化 
table 表示 表格 流 有 变化 
tbody 表示 表格 主体 无 有 变化 
td 表示 单元 格 无 有 变化 
tfoot 表示 表 脚 无 有 变化 
th 表示 标题 行 单元 格 无 有 变化 
thead 表示 标题 行 无 有 变化 
d 表示 一 行 单元 格 无 有 变化 
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表 6-7 中 的 元 素 用 于 创建 HTML 表单 ， 以 便 获 取 用 户 的 输入 数据 。 HITML5 中 对 这 方面 关注 较 
端 验证 输入 数据 的 功能 )。 HTML 


多 , 并 且 新 增 了 不 少 元 素 和 特性 ( 包括 在 用 户 提 交 表单 时 在 客户 





表单 元 素 的 介绍 见 第 12 章 、 第 13 章 和 第 14 章 。 特 别 值 得 关注 的 是 input 元 素 的 新 


此 先 作 简要 介绍 ， 然 后 在 第 13 章 继续 深入 说 明 。 
表 6-7 ”表单 元 素 











类 型 ， 第 12 章 对 

















































































































元 X 说 — 明 类 型 新 增 或 有 变化 
button 表示 可 用 来 提交 或 重 置 表单 的 按钮 ( 或 一 般 按 钮 ) 短语 有 变化 
datalist 定义 一 组 提供 给 用 户 的 建议 值 流 有 变化 
fieldset 表示 一 组 表单 元 素 流 有 变化 
form 表示 HTML 表 单 流 有 变化 
input 表示 用 来 收集 用 户 输入 数据 的 控件 短语 有 变化 
keygen 生成 一 对 公 钥 和 私 钥 短语 新 增 
label 表示 表单 元 素 的 说 明 标 签 短语 有 变化 
legend 表示 fieldset 元 素 的 说 明 性 标签 无 无 变化 
optgroup 表示 一 组 相关 的 option 元 素 无 无 变化 
option 表示 供用 户 选择 的 一 个 选项 无 无 变化 
output 表示 计算 结果 短语 新 增 
select 给 用 户 提 供 一 组 固定 的 选项 短语 有 变化 
textarea 用 户 可 以 用 它 输入 多 行文 字 短语 有 变化 

















6.4.7 BAAS 








表 6-8 中 的 元 素 用 于 在 HTML 文档 中 能 和 内容。 其 中 一 些 元 素 将 在 第 15 章 介绍 , 其 余 元 素 的 介 
























































绍 分 散在 后 面 各 童 。 
表 6-8 HATH 

元 素 说 明 类 m 新 增 或 有 无 变化 
ated 表示 一 个 用 于 客户 端 分 区 响应 图 的 区 域 短语 有 变化 

audio 表示 一 个 音频 资源 无 新 增 

canvas 生成 一 个 动态 的 图 形 画 布 短语 、 流 新 增 

embed 用 插件 在 HTML 文 档 中 嵌入 内 容 短语 新 增 

iframe 通过 创建 一 个 浏览 上 下 文 在 一 个 文档 中 租 入 男 一 个 文档 短语 有 变化 

img ARR 短语 有 变化 

map 定义 客户 端 分 区 响应 图 短语 、 流 有 变化 
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( 续 ) 
元 素 说 明 类 g 新 增 或 有 无 变化 
meter 授 入 数值 在 许可 值 范围 背景 中 的 图 形 表示 短语 新 增 
object TEHTML SCH PRANA. 也 可 用 于 生成 浏览 上 下 文 和 生成 客 。 短语 、 流 有 变化 
户 端 分 区 响应 图 

parem 表示 将 通过 object 元 素 传递 给 插件 的 参数 无 无 变化 
pr9gtess TUA Eb ERE SEA SENE DORT FEDES 短语 新 增 
Source 表示 媒体 资源 无 新 增 

SVB 表示 结构 化 矢量 内 容 无 新 增 
track 表示 媒体 的 附加 轨道 〈 例 如 字幕 ) 无 新 增 
video 表示 视频 资源 无 新 增 








6.5 未 实现 的 元 素 


有 两 个 元 素 目 前 还 没有 浏览 器 实现 ， 而 且 在 HTMLS 规 范 中 也 仅 有 含糊 不 清 的 说 明 。 这 两 
个 元 素 是 command 和 menu。 它们 的 设计 用 途 是 让 菜单 和 用 户 界 面 元 素 处 理 起 来 更 简单 一 些 , 但 本 
书 无 法 提供 详细 说 明 。 希望 随后 的 各 种 浏览 器 版 本 能 够 着 手 在 这 些 元 素 的 含义 上 达成 事实 上 的 
一 致 。 























6.6 小结 


本 章 为 后 面 各 章 中 HTML 元 素 的 详细 介绍 准备 了 一 些 背 景 知 识 , 并 且 提 供 了 一 份 元 素 的 快速 
参考 资料 ， 以 便 读者 将 来 温习 时 查阅 。 读 者 开始 学 习 HTML 元 素 和 属性 后 ， 应 该 记 住 本 童 开 头 提 
出 的 核心 建议 : 尽量 使 用 最 具体 的 元 素 ， 不 要 误 用 元 素 ， 在 文档 、 网 站 和 Web 应 用 系统 中 元 素 的 
使 用 都 要 保持 一 致 。 




















创建 HTML 文 档 











本 章 介绍 的 是 最 基础 的 HTML5 元 素 : 文档 元 素 和 元 数据 元 素 。 它 们 是 用 来 创建 HTML 文档 和 


说 明 其 内 容 的 元 素 。 




















这 些 元 素 不 那么 有 趣 , 但 是 非常 重要 。 读 者 如 果 想 跳 过 本 章 先 学 习 后 面 的 内 容 , 等 以 后 再 回 
头 阅读 本 章 也 可 以 ,但 务必 要 回头 读 一 遍 。 每 个 HTML 文 档 至 少 都 要 用 到 一 些 这 类 元 素 〈 用 到 所 





有 这 类 元 素 是 经 常 的 习 








E), 懂得 如 何 正确 使 用 它们 对 于 创建 遵守 标准 的 HTML5 文 档 很 关键 。 表 7-1 

































































































































































概括 了 本 章 内 容 。 
表 7-1 ”本章 内 容 概要 
问 — 8 解决 方案 代码 清单 
表示 文档 包含 的 是 HTML5 内 容 使 用 DOCTYPE 元 素 7-1 
表示 文档 中 HTML 标 记 的 开始 使 用 html 元 素 7-2 
表示 HTML 文 档 中 元 数据 部 分 的 开始 使 用 head 元 素 7-3 
表示 HTML 文 档 中 内 容 部 分 的 开始 使 用 body 元 素 7-4 
设置 HTML 文 档 的 标题 使 用 title 元 素 7-5 
设置 用 做 HTML 文档 中 的 相对 URL 解 析 基 础 的 URL ”使 用 base 元 素 7-6 
添加 对 于 HTML 文 档 所 含 数据 的 说 明 使 用 meta 元 素 7-7 
声明 HTML 文 档 的 字符 编码 使 用 带 charset 属 性 的 meta 元 素 7-8 
设置 HTML 文 档 的 默认 样式 表 或 周期 性 地 刷新 页 面 ”使 用 带 http-equiv 属 性 的 meta 元 素 7-9 
内 容 
&E SLOOPY A HR REE 使 用 style 元 素 7-10 ~ 7-12 
载 入 包括 样式 表 和 网 站 标志 在 内 的 外 部 资源 使 用 link 元 素 7-13 ~ 7-15 
预先 载 入 预计 马上 就 会 用 到 的 资源 使 用 link 元 素 , 并 将 其 rel 属 性 值 设置 为 prefetch 7-16 
定义 文档 内 艇 脚本 使 用 script 元 素 7-17 
载 人 外 部 脚本 文件 使 用 带 src 属 性 的 script 元 素 7-18, 7-19 
控制 脚本 的 执行 时 机 和 执行 方式 使 用 带 async 或 defer 属 性 的 script 元 素 7-20 ~ 7-24 
显示 为 浏览 器 不 支持 或 禁用 了 JavaScript 的 情况 准 ”使 用 noscript 元 素 7-25, 7-26 








备 的 内 容 
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7.1 构筑 基本 的 文档 结构 


先 从 文档 元 素 讲 起 。 这 些 基 础 成 分 确定 了 HTML 文档 的 轮廓 以 及 浏览 器 的 初始 环境 。 文 档 元 
素 只 有 4 个 ， 但 是 任何 HTML 文档 都 需要 所 有 这 些 元 素 。 

















7.1.1 DOCTYPE 元 素 


DOCTYPE 元 素 独一无二 ， 而 且 自 成 一 类 。 每 一 个 HTML 文 档 都 必须 以 DOCTYPE 元 素 开 头 。 浏 览 
器 据 此 得 知 自己 将 要 处 理 的 是 HTML 内 容 。 即使 省 略 DOCTYPE 元 素 , 大 多 数 浏览 器 仍 能 正确 显示 文 
档 内 容 ， 只 不 过 依赖 浏览 器 的 这 种 表现 不 是 好 习惯 。 表 7-2 概 括 了 DOCTYPE 元 素 。 


表 7-2  DOCTYPEZE EE 







































































元 素 DOCTYPE 

元 素 类 型 无 

人 允许 具有 的 父 元 素 无 

局 部 属性 无 

内 容 X 

标签 用 法 单个 开始 标签 

是 否 为 HTML5 新 增 否 

在 HTML5 中 的 变化 HTML4 中 要 求 要 有 的 DTD 已 不 再 使 用 
习惯 样式 无 








在 HTML5 中 DOCTYPE 元 素 只 有 一 种 用 法 ， 如 代码 清单 7-1 所 示 。 随 着 本 章 的 展开 ， 每 一 个 文 
档 元 素 都 会 被 添加 进来 ， 最 终 形成 一 个 简单 但 却 完整 的 HTML5 文 档 。 代 码 清 单 7-1 所 示 为 第 
一 行 。 
代码 清单 7-1 使 用 DOCTYPE 元 素 

<!DOCTYPE HTML> 

这 个 元 素 告 诉 浏 览 器 两 件 事情 : 第 一 ， 它 处 理 的 是 HTML 文 档 ; 第 二 ， 用 来 标记 文档 内 容 的 
HTML 所 属 的 版 本 。 版 本 号 用 不 着 写 。 浏 览 器 能 自动 探测 出 这 里 所 用 的 是 HTML5 ( 这 是 因为 这 个 
元 素 的 形式 在 HTML5 中 和 在 先前 的 HTML 版 本 中 略 有 差异 )。 该 元 素 没 有 结束 标签 。 只 消 在 文档 
开头 放 上 它 唯 一 的 标签 就 行 。 















































7.1.2 html 元 素 




















html 元 素 更 恰当 的 名 称 是 根 元 素 ， 它 表示 文档 中 HTML 部 分 的 开始 。 表 7-3 概 括 了 html 元 素 。 
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表 7-3 html 元 素 
























































元 素 html 

元 素 类 型 无 

允许 具有 的 父 元 素 无 

局 部 属性 manifest ( 详 见 第 40 章 ) 

内 容 head 元 素 和 body 元 素 各 一 

标签 用 法 开始 标签 和 结束 标签 ， 内 含 其 他 元 素 

是 否 为 HTML5 新 增 fü 

在 HIML5 中 的 变化 manifest 属 性 是 HTML5 中 新 增 的 。HTML4 版 本 中 的 属性 已 不 再 使 用 
习惯 样式 html { display: block; } 


html: focus { outline: none; } 


代码 清单 7-2 示 范 了 htm1 元 素 的 用 法 。 
代码 清单 7-2 使 用 html 元 素 


<!DOCTYPE HTML> 
<html> 


</html> 


7.1.3 head 元 素 


head 元 素 包 含 着 文档 的 元 数据 。 在 HTML 中 ， 元 数据 向 浏览 器 提供 了 有 关 文 档 内 容 和 标记 的 
言 息 ， 此 外 还 可 以 包含 脚本 和 对 外 部 资源 ( 比如 CSS 样 式 表 ) 的 引用 。 本 章 稍 后 会 介绍 元 数据 元 
素 。 表 7-4 概 括 了 head 元 素 。 


表 7-4 head 元素 
































元 素 head 

元 素 类 型 无 

允许 具有 的 父 元 素 html 

局 部 属性 无 

内 容 必须 有 一 个 title 元 素 ， 其 他 元 数据 元 素 可 有 可 无 
标签 用 法 开始 标签 和 结束 标签 。 内 含 其 他 元 素 

是 否 为 HTML5 新 增 f? 

在 HTML5 中 的 变化 无 

习惯 样式 无 





代码 清单 7-3 示 范 了 head 元 素 的 用 法 。 每 个 HTML 文 档 都 应 该 包含 一 个 head 元 素 , 而 后 者 必须 
包含 一 个 title 元 素 ， 如 代码 清单 所 示 。 本 章 稍 后 会 详细 介绍 title 元 素 。 
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代码 清单 7-3 ”使 用 head 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Hello</title> 
</head> 
</html> 


7.1.4 body 元 素 


HTML 文 档 的 元 数据 和 文档 信息 包装 在 head 元 素 中 ， 文档 的 内 容 则 包装 在 body 元 素 中 。body 
元 素 总 是 紧 跟 在 head 元 素 之 后 ， 它 是 html 元 素 的 第 二 个 子 元 素 。 表 7-5 概 括 了 body 元 素 。 


表 7-5 body 































































































元 素 类 型 无 

允许 具有 的 父 元 素 html 

局 部 属性 无 

内 容 所 有 短语 元 素 和 流 元 素 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 d 

在 HTML5 中 的 变化 alink, background, bgcolor, link, margintop, marginbottom, marginleft, marginright, 
marginwidth、text 和 vlink 属 性 已 不 再 使 用 。 这 些 属性 的 效果 可 用 CSS 实 现 

习惯 样式 body { display: block; margin: 8px; } 





body:focus { outline: none; } 





代码 清单 7-4 示 范 了 body 元 素 的 用 法 。 
代码 清单 7-4 ”使 用 body 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<p> 
I like <code id="applecode">apples</code> and oranges. 
</p> 
<a href-"http://apress.com"»Visit Apress.com«/a» 
</body> 
</html> 


此 例 在 body 元 素 中 添加 了 一 些 简 单 内 容 。 里 面 用 到 的 p、code 和 a 这 些 元 素 将 在 第 8 章 和 第 9 章 
介绍 。 至 此 呈现 在 读者 面前 的 已 经 是 一 个 简单 却 完整 的 HTML 文 档 。 图 7-1 为 这 个 文档 在 浏览 器 中 




















102 第 7 章 创建 HIML 文档 








的 显示 结果 。 





eo Example 


c Q | Q titan/listings/example.htm 1 A 





I like apples and oranges. 





| Visit Apress.com | 
Ut 一 = = = MM 


图 7-1 显示 在 浏览 器 中 的 一 个 简单 HTML 文 档 


= 























7.2 用 元 数据 元 素 说 明文 档 


元 数据 元 素 可 以 用 来 提供 关于 HTML 文 档 的 信息 。 它 们 本 身 不 是 文档 内 容 , 但 提供 了 关于 后 
面 的 文档 内 容 的 信息 。 元 数据 元 素 应 放 在 head 元 素 中 。 


7.2.1 设置 文档 标题 



































title 元 素 的 作用 是 设置 文档 的 标题 或 名 称 。 浏 览 器 通常 将 该 元 素 的 内 容 显 示 在 其 窗口 顶部 
或 标签 页 的 标签 上 。 表 7-6 概 括 了 title 元 素 。 





表 7-6 ”title 元 素 






































元 素 title 

元 素 类 型 元 数据 

人 允许 具有 的 父 元 素 head 

局 部 属性 无 

内 容 SCP PROT SOR IN A fal BUA Bi 
标签 用 法 开始 标签 和 结束 标签 。 内 含 文字 

是 否 为 HTML5 新 增 fü 

在 HTML5 中 的 变化 无 

习惯 样式 title { display: none; } 











每 个 HTML 文 档 都 应 该 有 且 只 有 一 个 title 元 素 ， 其 开始 标签 和 结束 标签 之 间 的 文字 在 用 户 
眼 里 应 有 实际 意义 。 至 少 用 户 应 能 据 此 区 分 各 个 浏览 絮 窗 口 或 浏览 絮 的 各 个 标签 页 , 并 且 知 道 哪 
个 显示 的 才 是 你 的 Web 应 用 系统 。 代 码 清单 7-5 示 范 了 title 元 素 的 用 法 。 
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代码 清单 7-5 ”使 用 title 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<p> 
I like <code id="applecode">apples</code> and oranges. 
</p> 
<a href-"http://apress.com"»Visit Apress.com</a> 
</body> 
</html> 


图 7-2 展 示 了 浏览 器 处 理 title 元 素 的 方式 。 岁 中 显示 的 是 谷歌 的 Chrome 浏 览 器 ,其 他 浏览 


与 此 大 同 小 异 。 
css 


€ c © titan/ stings/example.htm ZA 


























KI7-2 title 元 素 的 效果 





7.2.2 设置 相对 URL 的 解析 基准 


base 元 素 可 用 来 设置 一 个 基准 URL ， 让 HTML 文档 中 的 相对 链接 在 此 基础 上 进行 解析 。 相 
对 链接 省 略 了 URL 中 的 协议 、 主 机 和 端口 部 分 ， 需 要 根据 别 的 URL ( 要 么 是 base 元 素 中 指定 的 
URL， 要 么 是 用 以 加 载 当 前 文档 的 URL ) 得 出 其 完整 形式 。base 元 素 还 能 设 定 链接 在 用 户 点 击 
时 的 打开 方式 , 以 及 提交 表单 时 浏览 器 如 何 反应 (HTML5 表 单 的 介绍 见 第 12 章 )。 表 7-7 概 括 了 
base 元 素 。 

















表 7-7 ”base 元 素 
































元 素 base 

元 素 类 型 元 数据 

允许 具有 的 父 元 素 head 

局 部 属性 href, target 
内 容 无 

标签 用 法 虚 元 素 形 式 
是 否 为 HTML5 新 增 ff 

在 HTML5 中 的 变化 无 





习惯 样式 Xx 
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HTMIL 文档 至 少 应 该 包含 一 个 base 元 素 。 它 通常 是 head 元 素 中 位 置 最 靠 前 的 子 元 素 之 一 ， 以 
便 随后 的 元 数据 元 素 中 的 相对 URL 可 以 用 上 其 设置 的 基准 URL。 

1. 使 用 href 属 性 

href 属 性 指定 了 解析 文档 此 后 部 分 中 的 相对 URL 要 用 到 的 基准 URL。 代码 清单 7-6 示 范 了 base 
元 素 的 用 法 。 


代码 清单 7-6 ”使 用 base 元 素 中 的 href 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
</head> 
<body> 
<p> 
I like <code id="applecode">apples</code> and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
«a href="page2.html>Page 2</a> 
</body> 
</html> 


此 例 将 基准 URL 设 置 为 http:Wtitamlistings/。 其 中 titan 是 我 的 开发 服务 器 的 名 称 ， 而 listings 是 
服务 器 上 包含 本 书 示例 文件 的 目录 。 

在 文档 的 后 面部 分 有 一 个 用 来 生成 超 链接 的 a 元 素 ， 它 使 用 了 page2.html 这 个 相对 URL (aJt 
素 的 使 用 说 明 见 第 8 章 )。 用 户 点 击 这 个 超 链 接 时 , 浏览 絮 就 会 把 基准 URL 和 相对 URL 拼 接 成 完整 
的 URL: http://titan/listings/page2.html。 






































提示 如 果 不 用 base 元 素 ， 或 不 用 其 href 属 性 设置 一 个 基准 URL， 那 么 浏览 器 会 将 当前 文档 的 
URL 认 定 为 所 有 相对 URL 的 解析 基准 ,例如 ,假设 浏览 器 从 http://myserver.com/app/mypage. 
html 这 个 URL 载 入 了 一 个 文档 ， 该 文档 中 有 一 个 超 链接 使 用 了 myotherpage.html 这 个 相对 
URL， 那 么 点 击 这 个 超 链接 时 浏览 器 将 尝试 从 http://myserver.com/app/myotherpage.html 这 
个 绝对 URL 加 载 第 二 个 文档 。 


2. 使 用 target 属 性 
target 属 性 的 作用 是 告诉 浏览 絮 该 如 何 打 开 URL。 这 个 属性 的 值 代表 着 一 个 浏览 上 下 文 
( browsing context ) 第 8 章 和 第 15 章 讲 3 和 iframe 元 素 的 时 候 将 会 结合 例子 说 明 如 何 使 用 这 些 上 下 文 。 


7.2.8 ”用 元 数据 说 明文 档 


meta 元 素 可 以 用 来 定义 文档 的 各 种 元 数据 。 它 有 多 种 不 同 用 法 ， 而 且 一 个 HTML 文 档 中 可 以 
包含 多 个 meta 元 素 。 表 7-8 概 括 了 meta 元 素 。 
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表 7-8 ” meta 元 素 












































元 素 meta 

元 素 类 型 元 数据 

允许 具有 的 父 元 素 head 

局 部 属性 name, content, 、charset 和 http-equiv 

内 容 无 

标签 用 法 虚 元 素 形式 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 charset 属 性 是 HTML5 中 新 增 的 。 在 HTML4 中 ，http-equiv 属 性 可 以 有 任意 多 个 不 同 值 。 而 


























H 














在 HTML5 中 情况 有 所 不 同 ， 只 有 本 小 节 所 说 的 值 才能 使 用 。HTML4 中 的 scheme 属 性 在 
HTML5 中 已 不 再 使 用 。 此 外 ， 现 在 已 不 再 使 用 meta 元 素来 指定 网 页 所 用 的 语言 ( 本章 稍 后 
会 介绍 HTML5 中 的 做 法 ) 

习惯 样式 X 















































Hi 











H 
































下 面 介绍 几 种 meta 元 素 的 用 法 。 注 意 每 个 meta 元 素 只 能 用 于 一 种 用 途 。 如 果 在 这 些 特性 中 想 
要 使 用 的 不 止 一 个 ， 那 就 应 该 在 head 元 素 中 添加 多 个 meta 元 素 。 

1. 指定 名 / 值 元 数据 对 

meta 元 素 的 第 一 个 用 途 是 用 名 / 值 对 定义 元 数据 ， 为 此 需要 用 到 其 mame 和 content 属 性 。 代 码 
清单 7-7 即 为 一 例 。 


代码 清单 7-7 在 meta 元 素 中 用 名 / 值 对 定义 元 数据 


<!DOCTYPE HTML> 






































«html» 
«head» 
<title>Example</title> 
<base href="http://titan/listings/"/> 
«meta name-"author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«/head» 
«body» 
«p» 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href-"http://apress.com"»Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 








此 处 name 属 性 用 来 表示 元 数据 的 类 型 ， 而 content 属 性 用 来 提供 值 。 表 7-9 列 出 了 meta 元 素 可 
以 使 用 的 几 种 预定 义 元 数据 类 型 。 

除了 表 中 5 个 预定 义 的 元 数据 名 称 ， 还 可 以 使 用 元 数据 扩展 。http:/wiki.whatwg.org/wiki/ 
MetaExtensions 有 这 些 扩展 的 一 份 时 常 更 新 的 清单 。 有 些 扩 展 用 得 比较 多 ， 而 另外 一 些 扩展 则 是 
为 非常 罕 的 专门 用 途 而 设 ， 几 乎 没有 人 用 。irobots 元 数据 类 型 是 前 者 的 一 个 例子 。HTML 文档 的 
作者 可 以 用 它 告 诉 搜索 引擎 该 如 何 对 竺 该 文档 。 例 如 : 











106 第 7 章 创建 HIML 文档 





<meta name="robots" content="noindex"> 


表 7-9” 供 meta 元 素 使 用 的 预定 义 元 数据 类 型 



























































元 数据 名 称 LN 
application name 当前 页 所 属 Web 应 用 系统 的 名 称 
author 当前 页 的 作者 名 
description 当前 页 的 说 明 
generator ] 来 生成 HTML 的 软件 名 称 ( 通常 用 于 以 Ruby on Rails, 、ASP.NET 等 服务 器 端 框架 生成 
HTML 页 的 情况 下 ) 
keywords 一 批 以 逗号 分 开 的 字符 串 ， 用 来 描述 页 面 的 内 容 

















这 个 元 数据 类 型 有 三 个 大 多 数 搜索 引擎 都 认识 的 值 :noindex( 表示 不 要 索引 本 页 ).noarchive 
( 表示 不 要 将 本 页 存档 或 缓存 ) 和 nofollow ( 表示 不 要 顺 着 本 页 中 的 链接 继续 搜索 下 去 )。 可 用 的 
元 数据 扩展 为 数 不 少 ， 读 者 最 好 读 读 那 份 网 上 清单 ， 看 看 有 哪些 可 用 于 自己 的 项 目 。 











提示 “要 告诉 搜索 引擎 如 何 对 内 容 分 类 和 分 等 级 ， 过 去 最 主要 的 手段 就 是 使 用 keywords 元 数据 。 
现在 的 搜索 引擎 对 keywords 元 数据 的 重视 程度 远 不 如 前 ， 这 是 因为 它 可 以 被 滥用 来 制造 
页 面 内 容 和 相关 性 的 假象 。 要 想 让 内 容 在 搜索 引擎 眼 里 有 所 改观 ， 最 好 的 办 法 是 采纳 它 
们 自己 提供 的 建议 。 大 多 数 搜索 引擎 都 提供 了 优化 网 页 或 整个 网 站 的 指南 。 谷 歌 的 指南 
参见 : http://google.com/support/webmasters/bin/topic.py?topic=15260. 


2. 声明 字符 编码 

meta 苑 素 的 另 一 种 用 途 是 声明 HTML 文档 内 容 所 用 的 字符 编码 。 代 码 清单 7-8 就 是 一 个 这 方面 
的 例子 。 
代码 清单 7-8 用 meta 元 素 声 明 字 符 编 码 


<!DOCTYPE HTML> 




















<html> 

<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«meta charset-"utf-8"/» 

«/head» 

«body» 
«p» 

I like «code id-"applecode"»apples«/code» and oranges. 

</p> 


<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 
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例 中 声明 了 这 个 页 面 采用 UTF-8 编 码 。UTF-8 编 码 能 以 最 少 的 字 节 数 表示 所 有 Unicode 字 符 ， 
所 以 用 得 非常 普遍 。 撰 写本 书 的 时 候 ， 所 有 网 页 中 将 近 50% 使 用 的 是 UTF-8 编 码 。 

3. 模拟 HTTP 标 头 字段 

meta 元 素 的 最 后 一 种 用 途 是 改写 HTTP ( 超 文本 传输 协议 ) 标 头 字段 的 值 。 服 务 器 和 浏览 
之 间 传 输 HTML 数 据 时 一 般 用 的 就 是 HTTP。 本 书 不 打算 详细 介绍 HTTP, 读者 只 要 知道 服务 器 的 
每 条 响应 都 包含 着 一 组 向 浏览 器 说 明 其 内 容 的 字段 即 可 。meta 元 素 可 以 用 来 模拟 或 替换 其 中 三 种 
标 头 字段 。 代 码 清单 7-9 展 示 了 meta 元 素 的 这 种 用 法 的 一 般 形式 。 


代码 清单 7-9 ”用 meta 元 素 模拟 HTTP 标 头 字段 












































<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«meta charset-"utf-8"/» 
«meta http-equiv-"refresh" content="5"/> 
«/head» 
«body» 
«p» 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href-"http://apress.com"»Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 





http-equiv 属 性 的 用 途 是 指定 所 要 模拟 的 标 头 字段 名 称 , 字段 值 则 由 content 属 性 指定 。 此 例 
将 标 头 字段 refresh 的 值 设置 为 5， 其 作用 是 让 浏览 器 每 隔 5 秒 就 再 次 载 人 页 面 。 





























提示 “如 果 在 刷新 闻 隔 时 间 值 后 加 上 一 个 分 号 再 加 上 一 个 URL ， 那 么 浏览 器 在 指定 时 间 之 后 将 
载 入 指定 的 URL。 示 例 参 见 7.3.2 节 。 








http-equiv 属 性 有 三 个 值 可 用 ， 如 表 7-10 所 示 。 
表 7-10 ” meta 元素 的 http-equiv 属 性 允许 使 用 的 值 











属 性 值 说 明 
refresh 以 秒 为 单位 指定 一 个 时 间 间 隔 ， 在 此 时 间 过 去 之 后 将 从 服务 器 重新 载 和 人 当前 页 面 。 也 可 以 男 行 














指定 一 个 URL 让 浏览 器 载 人 。 如 <meta http-equiv="refresh" content="5; http://www.apress.com"/> 





























default-style 指定 页 面 优先 使 用 的 样式 表 。 对 应 的 content 属 性 值 应 与 同一 文档 中 某 个 style 元 素 或 link 元 素 的 
title 属 性 值 相同 
content.-type 这 是 另 一 种 声明 HTML 页 面 所 用 字符 编码 的 方法 。 如 
































«meta http-equiv-"content-type" content-"text/html charset-UTF-8"/» 
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7.2.4 定义 CSS 样式 


style 元 素 可 用 来 定义 HTMIL 文 档 内 肯 的 CSS 样 式 (link 元 素 则 是 用 来 导入 外 部 样式 表 中 的 相 


























<me 
<me 
<me 





Ty 








式 )。 表 7-11 概 括 了 style 元 素 。 
表 7-11 styles 
元 素 style 
元 素 类 型 无 
允许 具有 的 父 元 素 任何 可 包含 元 数据 元 素 的 元 素 ， 包 括 head、div、noscript、section、article、aside 
局 部 属性 type, media, scoped 
内 容 CSS 样 式 
标签 用 法 开始 标签 和 结束 标签 。 内 全 文字 
是 否 为 HTML5 新 增 a) 
在 HTML5 中 的 变化 scoped 属 性 为 HTML5 中 新 增 
习惯 样式 x 
代码 清单 7-10 示 范 了 style 元 素 的 用 法 。 
代码 清单 7-10 使 用 style 元 素 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 


ta name="author" content="Adam Freeman"/> 
ta name-"description" content-"A simple example"/» 
ta charset-"utf-8"/» 





«style type-"text/css"» 


a { 
background-color: grey; 
color: white; 
padding: 0.5em; 


</style> 


</head> 
<body> 
<p> 


I like <code id="applecode">apples</code> and oranges. 


</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 














</body> 
<html> 
此 例 为 3 元 素 设 计 了 一 个 新 样式 ， 让 链接 显示 为 灰色 背景 上 的 白色 文字 ， 周 边 留 出 少许 内 边 
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WB ( 没 接触 过 CSS 的 读者 可 以 在 第 4 章 学 习 一 些 入 门 知 识 。 其 全 面 介绍 始 于 第 16 章 )。 样式 的 效果 
如 图 7-3 所 示 。 





/ Q Example x Vs 
€ Q  Otitan/listings/example.htm XA | 


Ilike appies and oranges. 


Visit ess.com | Page 2 





























图 7-3 ”用 style 元 素 创建 文档 内 藤 样 式 


style 元 素 可 以 出 现在 HTML 文档 中 的 各 个 部 分 。 一 个 文档 可 包含 多 个 style 元 素 ， 因 此 不 必 
把 所 有 样式 定义 都 塞 进 nead 部 分 。 在 使 用 模板 引擎 生成 页 面 的 情况 下 这 个 特性 很 有 帮助 ， 因 为 这 
样 一 来 就 可 以 用 页 面 特 有 的 样式 为 模板 定义 的 样式 提供 补充 。 

1. 指定 样式 类 型 

type 属 性 可 以 用 来 将 所 定义 的 样式 类 型 告诉 浏览 器 。 但 是 浏览 器 支持 的 样式 机 制 只 有 CSS 一 
种 ， 所 以 这 个 属性 的 值 总 是 text/css。 

2. 指定 样式 作用 范围 

如 果 style 元 素 中 有 scoped 属 性 存在 ， 那 么 其 中 定义 的 样式 只 作用 于 该 元 素 的 父 元 素 及 所 有 
兄弟 元 素 。 要 是 不 用 scoped 属 性 的 话 , 在 HTML 文 档 中 任何 地 方 用 style 元 素 定义 的 样式 都 将 作用 
于 整个 文档 。 























警告 ”在 撰写 本 书 时 ， 尚 无 主流 浏览 器 支持 style 元 素 的 scoped 属 性 。 


3. 指定 样式 适用 的 媒体 
media 属 性 可 用 来 表明 文档 在 什么 情况 下 应 该 使 用 该 元 素 中 定义 的 样式 .代码 清单 7-11 示 范 了 
这 个 属性 的 用 法 。 


代码 清单 7-11 使 用 style 元 素 的 media 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«meta charset-"utf-8"/» 
«style media-"screen" type="text/css"> 
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a{ 
background-color: grey; 
color: white; 
padding: 0.5em; 

} 

</style> 
<style media="print"> 

af 
color:Red; 
font-weight: bold; 
font-style: italic 


</style> 
</head> 
<body> 

<p> 


I like <code id="applecode">apples</code> and oranges. 


</p> 


<a href="http://apress.com">Visit Apress.com</a> 


<a href="page2.html">Page 2</a> 
</body> 
</html> 


代码 中 使 用 了 两 个 style 元 素 ， 它 们 有 不 同 的 media 属 性 值 。 浏 览 器 在 屏幕 上 显示 文档 的 时 候 
用 的 是 第 一 个 style 元 素 中 的 样式 ， 在 打印 文档 的 时 候 用 的 是 第 二 个 中 的 样式 。 
样式 的 使 用 条 件 可 以 设计 得 非常 细致 。 首 先 要 确定 的 是 所 针对 的 设备 类 型 。 表 7-12 总 结 了 所 



































有 符合 规定 的 值 。 
表 7-12 ” 供 style 元 素 的 media 属 性 用 的 规定 设备 值 
设备 说 — HB 
all 将 样式 用 于 所 有 设备 ( 默认 值 ) 
aural 将 样式 用 于 语音 合成 器 
braille 将 样式 用 于 盲文 设备 
handheld 将 样式 用 于 手持 设备 
projection 将 样式 用 于 投影 机 
print 将 样式 用 于 打印 预览 和 打印 页 面 时 
screen 将 样式 用 于 计算 机 显示 器 屏幕 
tty 将 样式 用 于 电 传 打字 机 之 类 的 等 宽 设备 
tv 于 











EH 








TER 电视 机 


浏览 器 负责 解释 设备 归 类 。 














有 些 设备 类 型 ( 比如 screen 和 print ) 在 各 种 浏览 器 上 的 解释 比 


较 一 致 ， 但 另 一 些 设备 〈 比如 handheld 设 备 类 型 ) 的 解释 可 能 就 随意 多 了 。 因 此 核实 一 下 所 针对 
的 浏览 器 对 特定 设备 的 解释 与 自己 是 否 一 致 非常 必要 。media 还 有 一 些 特性 可 以 用 来 设计 更 具体 











的 使 用 条 件 ， 代 码 清单 7-12 即 为 一 例 。 
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代码 清单 7-12 ”让 style 元 素 的 对 象 更 加 具体 





<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content="A simple example"/» 
«meta charset-"utf-8"/» 
«style media-"screen AND (max-width:500px)" type="text/css"> 
a { 
background-color: grey; 
color: white; 
padding: 0.5em; 
</style> 
<style media="screen AND (min-width:500px)" type="text/css"> 
a {color:Red; font-style:italic} 
</style> 
</head> 
<body> 
<p> 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href-"page2.html"»Page 2</a> 
</body> 
</html> 





代码 中 使 用 media 的 width 特性 区 分 两 组 样式 。 浏 览 器 窗口 宽度 小 于 500 像 素 时 使 用 的 是 第 一 
组 样式 ,窗口 宽度 大 于 500 像 素 时 使 用 的 是 第 二 组 ,用 浏览 器 打开 代码 清单 7-12 对 应 的 HTML 文 档 ， 








然后 拖拉 窗口 边缘 以 改变 其 大 小 ， 就 能 看 到 这 个 特性 的 效果 ， 如 图 7-4 所 示 。 


f E = [gx 
J © Example Ye N 


| € Œ | O titan/listings/example.html yv | X | 








I like apples and oranges. 
pr 


/ © Exemple 
e Œ | Q titan/listings/example.htr 

























I like apples and oranges. 





Visit Apress.com Page 2 











图 7-4 ”根据 浏览 器 窗口 宽度 选择 使 用 的 样式 
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注意 此 例 中 使 用 了 AND 来 组 合 设备 和 特性 条 件 。 除 了 AND, 还 可 以 使 用 NOT 和 表示 OR 的 逗号 (，)。 
厌 此 可 以 为 应 用 样式 设计 出 复杂 而 又 相当 具体 的 条 件 。 

de NU e AQ 不 用 这 些 限 定 词 , 让 样式 的 使 用 取决 于 非常 
精确 的 窗口 尺寸 也 行 , 但 是 加 上 限定 词 会 让 条 件 变 得 更 加 灵活 。 表 7-13 罗 列 并 介绍 了 可 用 的 各 种 
特性 。 若 非特 别 点 明 ， ee T4 pc REL TT AN Ze AA o 


表 7-13 ” 供 style 元 素 的 media 属 性 使 用 的 特性 






































































































































特 性 说 明 m A 
width height 指定 浏览 器 窗口 的 宽度 和 高 度 。 单 位 为 px， 代 表 像素 width:200px 
device-width 指定 整个 设备 ( 而 不 仅仅 是 浏览 器 窗口 ) 的 宽度 和 高 度 。 单位 min-device-height : 200px 
device-height ; es 

为 px， 代 表 像 素 
resolution 指定 设备 的 像素 密度 。 单位 为 dpi( 点 /英寸 ) 或 dpcm (点 /厘米 ) max-resolution:600dpi 
orientation 指定 设备 的 较 长 边 朝 向 。 支 持 的 值 有 portrait 和 1andscape。 该 orientation:portrait 
寺 性 没有 限定 词 
etn 指定 浏览 器 窗口 或 整个 设备 的 像素 宽 高 比 ,其 值 表示 为 像素 宽 min-aspect-ratio:16/9 
度 与 像素 高 度 的 比值 
color monochrome 指定 彩色 或 黑白 设备 上 每 个 像素 占用 的 二 进 制 位 数 min-monochrome:2 
color-index Be BR Ur fie to EAT ECC max-color-index:256 
scan IHE Bag d C. LEA progressivefllinterlace. 该 scan: interlace 
等 性 没有 限定 词 
grid 指定 设备 的 类 型 。 网 格 型 设备 使 用 固定 的 网 格 显示 内 容 , 例如 。 grid:o 
基于 字符 的 终端 和 单行 显示 的 寻呼机 。 支 持 的 值 有 0 和 1 (1 代 

















表 网 格 型 设备 ) 。 该 特性 没有 限定 词 











与 指定 设备 的 情况 类 似 , 这 些 特性 也 是 由 浏览 器 负责 解释 。 关 于 浏览 器 认识 哪些 特性 以 及 认 
定 这 些 特 性 什么 时 候 存在 并 且 可 以 使 用 ， 其 具体 情况 纷 经 繁杂 。 如 果 要 根据 这 些 特性 应 用 样式 ， 
请 务必 进行 全 面 的 测试 ， 并 且 准 备 好 预期 特性 不 可 用 时 改 用 的 备用 样式 。 











7.2.5 ”指定 外 部 资源 


link 元 素 可 用 来 在 HTML 文 档 和 外 部 资源 ( CSS 样式 表 是 最 典型 的 情况 ) 之 间 建 立 联系 。 
表 7-14 概 括 了 link 元 素 。 





表 7-14 1ink 元 素 





元 素 link 
元 素 类 型 元 数据 
允许 具有 的 父 元 素 head、 noscript 














局 部 属性 href, rel, hreflang, media, type, sizes 
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( 续 ) 
内 容 无 
标签 用 法 虚 元 素 形式 
是 否 为 HTML5 新 增 f 
在 HTML5 中 的 变化 新 增 了 sizes 属 性 。 原 来 的 charset 、revr 和 target 属 性 在 HTML5 中 已 不 再 使 用 
习惯 样式 无 





























link 元 素 定 义 了 6 个 局 部 属性 , 其 说 明 见 表 7-15。 这 些 属性 中 最 重要 的 是 rel, 它 说 明了 HTML 
页 与 link 元 素 所 关联 资源 的 关系 类 型 。 本 章 稍 后 会 介绍 一 些 最 常见 的 关系 类 型 。 


表 7-15 ”1ink 元 素 的 局 部 属性 







































































属 性 说 明 

href 指定 link 元 素 指 向 的 资源 的 URL 

hreflang 说 明 所 关联 资源 使 用 的 语言 

media 说 明 所 关联 的 内 容 用 于 哪 种 设备 。 该 属性 使 用 的 设备 和 特性 值 与 表 7-10 和 表 7-11 中 介绍 的 相同 
rel 说 明文 档 与 所 关联 资源 的 关系 类 型 

sizes 指定 图 标的 大 小 。 本 章 后 面 有 一 个 用 link 元 素 载 人 网 站 标志 的 例子 

type 站 定 所 关联 资源 的 MIME 类 型 ， 如 text/css、image/x-icon 





为 rel 属 性 设 定 的 值 决定 了 浏览 器 对 待 link 元 素 的 方式 。 表 7-16 介 绍 了 rel 属 性 比较 常用 的 一 
HOA, 除 此 之 外 rel 属 性 还 定义 了 一 些 其 他 值 , 但 是 它们 目前 仍然 属于 HTML5 中 有 待 确定 的 部 分 。 
rel 属 性 值 最 全 面 的 介绍 参见 http://iana.org/assignments/link-relations/link-relations.xml。 


表 7-16 ”1ink 元 素 的 rel 属 性 值 选编 
























































值 说 明 

alternate 链接 到 文档 的 替代 版 本 ， 比 如 男 一 种 语言 的 译本 
author 链接 到 文档 的 作者 
help 链接 到 当前 文档 的 说 明文 档 
icon 指定 图 标 资源 ， 参 见 代码 清单 7-15 示 例 
license 链接 到 当前 文档 的 相关 许可 证 
pingback 肯定 一 个 回 探 ( pingback ) 服务 器 。 从 其 他 网 站 链接 到 博客 的 时 候 它 能 自动 得 到 通知 
prefetch 预先 获取 一 个 资源 ， 参 见 代 码 清单 7-15 示 例 
stylesheet 载 和 人 外 部 样式 表 ， 参 见 代码 清单 7-14 示 例 

1. 载 入 样式 表 





为 演示 1link 元 素 在 这 方面 的 用 法 ， 我 创建 了 一 个 名 为 styles.css 的 样式 表 ， 其 内 容 如 代码 清 
单 7-13 所 示 。 
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代码 清单 7-13 styles.css 文 件 


a 1 
background-color: grey; 
color: white; 
padding: 0.5em; 


Ww 


这 条 样式 在 先前 的 例子 中 定义 在 style 元 素 里 面 ， 现 在 被 放 到 了 一 个 外 部 样式 表 文 件 中 。 要 


使 用 这 个 样式 表 ， 需 要 用 到 1ink 元 素 ， 如 代码 清单 7-14 所 示 。 
代码 清单 7-14 ”用 1ink 元 素 载 入 外 部 样式 表 


<!DOCTYPE HT 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«meta charset-"utf-8"/» 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«/head» 
«body» 
«p» 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 


ML> 





可 以 使 用 多 个 link 元 素 载 人 多 个 外 部 资源 。 使 用 外 部 样式 表 的 好 处 在 于 可 以 让 多 个 文档 使 用 





同一 套 样 式 而 不 必 将 这 些 样 式 复制 到 每 一 个 文档 
是 定义 在 style 元 素 中 一 般 ， 如 图 7-5 所 示 。 




















中 。 浏览 器 会 载 人 和 应 用 其 中 的 样式 ,仿佛 它们 
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© Example 


o| B 





€ 


| I like apples and oranges. 


Er 
L : 





Œ | O titan/listings/example.htm 


wi 




















应 





图 7-5 








2. 为 页 面 定义 网 站 标志 


] 来 自 外 部 样式 表 中 的 样式 





除了 CSS 样 式 表 ，link 元 素 最 常见 的 用 处 要 算 定义 与 页 面 联 系 在 一 起 的 图 标 。 各 种 浏览 器 处 

















理 这 种 图 标的 方式 有 所 不 同 , 常见 的 做 法 是 将 其 8 


显示 在 相应 的 标签 页 标签 上 或 收藏 夹 中 相应 的 项 
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目前 (如果 用 户 收 藏 了 这 个 页 面 的话 )。 为 了 演示 这 种 用 法 ， 我 找 来 了 Apress 在 www.apress.com 
网 站 使 用 的 网 站 标志 。 这 是 一 个 32 像 素 x 32 像 素 的 图 像 ， 格 式 为 .ico。 浏 览 器 都 支持 这 种 图 像 格 
式 ， 图 像 看 起 来 如 图 7-6 所 示 ， 该 图 像 的 文件 名 为 favicon.ico。 








图 7-6 ”Apress 的 网 站 标志 
要 想 使 用 这 个 网 站 标志 ， 需 要 在 页 面 中 添加 一 个 link 元 素 ， 如 代码 清单 7-15 所 示 。 
代码 清单 7-15 ”用 1ink 元 素 添加 网 站 标志 


<!DOCTYPE HTML» 











«html» 
«head» 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
«p» 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 


























DU ae AH TML 页 面 的 时 候 , 也 会 载 人 并 显示 网 站 标志 ,如 图 7-7 所 示 。 图 中 显示 的 是 谷 
的 Chrome， 它 把 网 站 标志 显示 在 标签 页 的 顶部 。 


€ C | © titan/listings/example.html iX 


zm 




















Ilike appies and oranges. | 








图 7-7 显示 在 标签 页 顶端 的 网 站 标志 
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提示 “如 果 网 站 标志 文件 位 于 /favicon.ico ( 即 Web 服 务 器 的 根 目 录 )， 那 就 不 必用 到 link 元 素 。 
大 多 数 浏览 器 在 载 入 页 面 时 都 会 自动 请 求 这 个 文件 ， 就 算 没 有 link 元 素 也 是 如 此 。 


3. 预先 获取 资源 
可 以 要 求 浏览 器 预先 获取 预计 很 快 就 要 用 到 的 资源 。 代 码 清单 7-16 示 范 了 1link 元 素 的 这 种 
用 法 。 


代码 清单 7-16 ”预先 获取 关联 的 资源 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«link rel-"prefetch" href-"/page2.html"/» 
«/head» 
«body» 
«p» 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 


此 例 将 rel 属 性 设置 为 prefetch， 并 且 要 求 载 人 HTML 页 面 page2.html1， 为 用 户 点 击 某 个 链接 
以 执行 其 他 需要 这 个 页 面 的 操作 做 好 准备 。 








注意 ”在 撰写 本 书 时 ， 只 有 Firefox 支 持 link 元 素 的 预先 获取 功能 。 


7.3 ”使 用 脚本 元 素 


与 脚本 相关 的 元 素 有 两 个 。 第 一 个 是 script， 用 于 定义 脚本 并 控制 其 执行 过 程 。 第 二 个 是 
noscript， 用 于 规定 在 浏览 器 不 支持 脚本 或 禁用 了 脚本 的 情况 下 的 处 理 办 法 。 




















HER script 元 素 一 般 放 在 head 元 素 中 ,不 过 它 也 可 以 放 在 HTML 文 档 中 的 任意 位 置 。 我 建议 把 
所 有 脚本 元 素 都 集中 到 文档 的 head 部 分 ， 这 有 助 于 查看 脚本 ， 而 且 大 家 在 查找 脚本 时 一 
般 想到 的 都 是 这 个 地 方 。 
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7.3.1 script 元 素 





script 元 素 可 以 用 来 在 页 面 中 加 入 脚本 ,方式 有 在 文档 中 定义 脚本 和 引用 外 部 文件 中 的 脚本 
两 种 。 最 常用 的 脚本 类 型 是 JavaScript ( 这 也 是 本 书 所 用 的 脚本 类 型 )， 不 过 浏览 器 也 的 确 支 持 一 
些 别 的 脚本 语言 ， 包 括 第 1 章 所 述 浏 览 器 之 战 的 一 些 子 遗 。 表 7-17 概 括 了 script 元 素 。 每 定义 或 
导入 一 段 脚 本 需要 使 用 一 个 Script 元素 。 


元 素 

元 素 类 型 

允许 具有 的 父 元 素 
局 部 属性 





























] 法 
是 否 为 HTML5 新 增 
在 HTML5 中 的 变化 








习惯 样式 








表 7-17 script 元 素 


script 

元 数据 /短语 

可 以 包含 元 数据 或 短语 元 素 的 任何 元 素 

type. src, defer, async, charset 
脚本 语言 语句 。 用 于 导入 外 部 JavaScript 库 时 元 素 没 有 内 容 


























必须 使 用 开始 标签 和 结束 标签 。 不 能 使 用 自 闭合 标签 ， 就 算 引 用 外 部 JavaScript 库 也 是 如 此 
AS 
r1 

















在 HTML5 中 type 属 性 可 有 可 无 ，async 属 性 是 新 增 的 ，HTML4 中 的 属性 language 在 HTML5 中 
不 再 使 用 


(u 




















Lu 














这 个 元 素 所 属 类 型 因 其 用 法 而 异 。 位 于 head 元 素 中 的 script 元 素 属于 元 数据 元 素 ， 位 于 其 他 
元 素 (如 body 或 section ) 中 的 则 属于 短语 元 素 。 
接 下 来 要 介绍 的 是 如 何 用 script 元 素 完成 各 种 任务 。 表 7-18 介 绍 了 script 元 素 定 义 的 属性 。 





























表 7-18 script 元 素 的 局 部 属性 


















































属 性 说 明 
type 表示 所 引用 或 定义 的 脚本 的 类 型 ， 对 于 JavaScript 脚 本 这 个 属性 可 以 省 略 
SIC 指定 外 部 脚本 文件 的 URL， 参 见 后 面 的 例子 
defer 设 定 脚 本 的 执行 方式 ， 参 见 后 面 的 例子 。 这 两 个 属性 只 能 与 src 属 性 一 同 使 用 
async 
charset 




















说 明 外 部 脚本 文件 所 用 字符 编码 ， 该 属性 只 能 与 src 属 性 一 同 使 用 








1. EMSA BRIAR 
AE SCIAS dee fe FJ 25 EN ce ML, EBK JavaScriptifi’a] ARR EHTML Xt iip, A 





单 7-17 即 是 一 例 。 


代码 清单 7-17 ”定义 文档 内 诅 脚 本 


<!DOCTYPE HTML» 
<html> 
<head> 


118 第 7 章 创建 HIML 文档 





<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«script» 
document.write("This is from the script"); 
</script> 
</head> 
<body> 
<p> 
I like <code id="applecode">apples</code> and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 


不 使 用 type 属 性 时 , 浏览 器 会 假定 使 用 的 是 JavaScript。 这 段 简单 的 脚本 在 HITML 文 档 中 加 入 
了 一 些 文字 。 软 认 情 况 下 ,浏览 需 在 页 面 中 一 遇 到 脚本 就 会 执行 。 图 7-8 显 示 了 这 个 例子 的 结果 ， 
从 中 可 以 看 到 ， 脚 本 输出 的 文字 在 浏览 器 窗口 中 显示 在 body 元 素 所 含 p 元 素 之 前 。 












































f tax) 
Example E 
€ Œ | Q titan/listings/example.htm 3X! 
This is from the script 


I like apples and oranges. 





bs -— 4 


图 7-8 一 段 简单 脚本 的 效果 











2. 载 入 外 部 脚本 库 

可 以 把 脚本 放 到 单独 的 文件 中 ， 然 后 用 script 元 素 载 人 HTML 文档 。 这 些 文件 有 小 《如 下 面 
的 例子 ) 有 大 ( 如 jQuery 这 种 复杂 的 库 )。simplejs 是 外 部 脚本 文件 的 一 个 例子 ， 其 内 容 如 代码 清 
单 7-18 所 示 。 
代码 清单 7-18 ”脚本 文件 simple.js 的 内 容 

document .write("This is from the external script"); 

ic xF HS Ai, BOCA HAIR BPE. FORT T-19 ze T an FA 
script 元 素 的 src 属 性 引用 这 个 文件 。 











提示 设置 了 src 属 性 的 script 元 素 不 能 含有 任何 内 容 。 不 能 用 同一 个 script 元 素 既定 义 内 腐 脚 
本 又 引用 外 部 脚本 。 
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代码 清单 7-19 用 src 属 性 载 人 外 部 脚本 


<!DOCTYPE HTML> 





«html» 
«head» 
«title»Example«/title» 
«base href-"http://titan/listings/"/» 
«meta name-"author" content-"Adam Freeman"/» 
«meta name-"description" content-"A simple example"/» 
<link rel="stylesheet" type="text/css" href="styles.css"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«script src-"simple.js"»«/script» 
«/head» 
«body» 
«p» 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 





src 属 性 的 值 应 为 所 要 载 人 的 脚本 文件 的 URL。 由 于 simple.js 文 件 与 这 个 HTMIL 文 件 位 于 同一 
个 目录 ， 所 以 此 例 中 可 以 使 用 一 个 相对 URL。 这 段 脚本 的 结果 如 图 7-9 所 示 。 








[ IET) 
Example XE 
€ Œ | O titan/listings/example.html Wo 
This is from the external script 


I like apples and oranges. 


| | 
E" 








4 





图 7-9 一 段 外 部 脚本 的 效果 


提示 例 中 的 script 元 素 尽管 没有 任何 内 容 ， 还 是 使 用 了 结束 标签 。 如 果 用 自 闭合 标签 引用 外 
部 脚本 ， 浏 览 器 将 忽略 这 个 元 素 ， 不 会 加 载 引 用 的 文件 。 


3. 推迟 脚本 的 执行 

可 以 用 async 和 defer 属 性 对 脚本 的 执行 方式 加 以 控制 defer 属 性 告诉 浏览 器 要 等 页 面 载 和 和 
解析 完毕 之 后 才能 执行 脚本 。 要 明白 defer 属 性 的 好 处 ， 需 要 认识 它 所 要 解决 的 问题 。 代 码 清单 
7-20 显 示 了 脚本 文件 simple2.js 的 内 容 ， 里 面具 有 一 条 语句 。 


代码 清单 7-20 ”脚本 文件 simple2.js 所 含 语句 


document.getElementById("applecode").innerText = "cherries"; 
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这 条 语句 的 各 组 成 部 分 留待 本 书 第 四 部 分 说 明 , 现在 只 消 知道 它 执行 的 时 候 会 查找 一 个 id 属性 值 
为 applecode 的 元 素 并 且 将 其 内 部 内 容 改 为 cherries。 代 码 清单 7-21 展 示 了 一 个 用 script 元 素 引 用 
这 个 脚本 文件 的 HTML 文 档 。 


代码 清单 7-21 引用 脚本 文件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«script src="simple2.js"></script> 
«/head» 
«body» 
«p» 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 




















</body> 
</html> 
载 入 这 个 HTML 页 面 后 ， 结 果 并 不 是 原先 想象 的 那样 ， 如 图 7-10 所 示 。 
r Erm) 
Example C 
e C |Q titan/listings/example.htm WA 


I like apples and oranges. 


Visit Apress.com | Page 2 














图 7-10 ”脚本 的 时 间 安 排 问 题 


默认 情况 下 ， 浏 览 器 一 遇 到 script 元 素 就 会 暂停 处 理 HTML 文 档 ， 转 而 载 人 脚本 文件 并 执行 
其 中 的 脚本 。 在 脚本 执行 完毕 之 后 浏览 器 才 会 继续 解析 HTML。 这 个 例子 中 浏览 器 载 人 和 执行 
simple2.js 中 的 语句 时 还 没有 解析 其 余 的 HTML 文 档 内 容 。 脚 本 找 不 到 要 找 的 那个 元 素 ， 所 以 也 就 
没有 作出 任何 改变 。 脚 本 执行 完毕 之 后 ， 浏 览 咒 继续 解析 HTML ，code 元 素 也 随 之 出 现 。 然 而 对 
于 脚本 而 言 为 时 已 晚 ， 它 不 会 再 执行 一 遍 。 这 个 问题 有 个 显而易见 的 解决 办 法 是 将 script 元 素 放 
到 文档 最 后 ， 如 代码 清单 7-22 所 示 。 


代码 清单 7-22 ”通过 改变 script 元 素 的 位 置 解 决 脚本 的 时 间 安 排 问 题 


<!DOCTYPE HTML> 
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<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
<link rel="stylesheet" type="text/css" href="styles.css"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
«p» 
I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
<script src="simple2.js"></script> 
</body> 
</html> 


这 个 办 法 考虑 到 了 浏览 器 处 理 script 元 素 的 方式 ,确保 了 在 脚本 涉及 的 元 素 解析 出 来 之 后 才 
载 人 和 执行 脚本 。 从 图 7-11 中 可 以 看 到 ， 脚 本 执行 的 结果 已 经 符合 需要 。 
f ete) 
Example E 
€ Q |Q titan/listings/example.htm UA | 








| Hike cherries and oranges. 


Ere 


图 7-11 ”脚本 作用 在 一 个 a 元 素 上 的 结果 


这 个 办 法 的 确 管 用 ， 不 过 在 HTML5 中 可 以 用 defer 属 性 达到 同样 的 目的 。 浏 览 器 在 遇 到 带 有 
defer 属 性 的 script 元 素 时 , 会 将 脚本 的 加 载 和 执行 推迟 到 HTML 文 档 中 所 有 元 素 都 已 得 到 解析 之 
后 。 代 码 清单 7-23 示 范 了 带 defer 属 性 的 script 元 素 的 用 法 。 


代码 清单 7-23 ”使 用 带 defer 属 性 的 script 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
<link rel="stylesheet" type="text/css" href="styles.css"/> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<script defer src="simple2.js"></script> 
</head> 
<body> 
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<p> 
I like <code id="applecode">apples</code> and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 


在 浏览 器 中 载 和 人 这 个 页 面 所 得 结果 与 将 script 元 素 移 到 页 面 末尾 那个 办 法 的 结果 相同 。 现 在 
脚本 可 以 找到 code 元 素 并 且 改 变 其 文字 内 容 了 ， 效 果 与 图 7-11 所 示 相 同 。 














提示 “defer 属 性 只 能 用 于 外 部 脚本 文件 ， 它 对 文档 内 睹 脚本 不 起 作用 。 


4. 异步 执行 脚本 

async 属 性 解决 的 是 另 一 类 问题 。 前 面 说 过 , 浏览 器 遇 到 script 元 素 时 的 默认 行为 是 在 加 载 和 
执行 脚本 的 同时 暂停 处 理 页 面 。 各 个 script 元 素 依次 ( 即 按 其 定义 的 次 序 ) 同步 〈 即 在 脚本 加 载 
和 执行 进程 中 不 再 管 别 的 事情 ) 执行 。 

作为 处 理 脚 本 的 默认 方式 , 同步 顺序 执行 自 有 其 意义 所 在 。 不 过 有 些 脚 本 并 不 需要 这 样 处 理 ， 
对 这 类 脚本 可 以 使 用 async 属 性 提高 其 性 能 。 这 方面 的 一 个 典型 例子 是 跟踪 脚本 ( tracking script )。 
这 种 脚本 可 以 汇报 用 户 的 网 站 访问 记录 以 便 广 告 公司 根据 用 户 的 浏览 习惯 定制 和 投放 广告 ， 或 者 
收集 网 站 访问 者 的 统计 数据 以 供 分 析 ， 诸 如 此 类 。 这 些 脚 本 自 成 一 体 ， 一 般 不 需要 与 HTML 文 档 
中 的 元 素 互 相 作用 。 为 等 待 它们 加 载 然后 向 自己 的 服务 器 发 回报 告 而 推迟 显示 页 面 没 有 任何 意义 。 

使 用 了 async 属 性 后 ,浏览 需 将 在 继续 解析 HTML 文档 中 其 他 元 素 ( 包括 其 他 script 元 素 ) 的 
同时 异步 加 载 和 执行 脚本 。 如 果 运 用 得 当 ,， 这 可 以 大 大 提高 整体 加 载 性 能 。 代 码 清 单 7-24 示 范 了 
async 属 性 的 用 法 。 


代码 清单 7-24 ”使 用 async 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«script async src-"simple2.js"»«/script» 
«/head» 
«body» 
«p» 


















































éd 




















I like «code id-"applecode"»apples«/code» and oranges. 
</p> 
<a href="http://apress.com">Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 

</body> 
</html> 
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使 用 async 属 性 的 一 个 重要 后 果 是 页 面 中 的 脚本 可 能 不 再 按 定 义 它 们 的 次 序 执 行 。 因 此 如 果 





脚本 使 用 了 其 他 脚本 中 定义 的 函数 或 值 ， 那 就 不 宜 使 用 async 属 性 。 








7.3.2 noscript 元 素 


noscript 元 素 可 以 用 来 问 禁 用 了 JavaScript 或 浏览 器 不 支持 JavaScript 的 用 户 显 示 一 些 内 容 。 
表 7-19 概 括 了 noscript 元 素 。 














表 7-19 noscript t% 





元 素 noscript 

元 素 类 型 元 数据 /短语 / 流 

允许 具有 的 父 元 素 任何 可 以 包含 元 数据 元 素 、 短 语 元 素 或 流 元 素 的 元 素 

局 部 属性 无 
内 容 短语 元 素 或 流 元 素 

标签 用 法 开始 标签 和 结束 标签 都 需要 

是 否 为 HTML5 新 增 fi 

在 HTML5 中 的 变化 无 

习惯 样式 无 


与 script 元 素 类 似 ，noscript 元 素 所 属 类 型 取决 于 它 在 文档 中 的 位 置 。 











尽管 现在 JavaScript 已 经 得 到 了 广泛 支持 , 但 是 仍然 有 一 些 专门 用 途 的 浏览 器 不 支持 它 。 而 且 
就 算 浏览 器 支持 JavaScript， 用 户 也 可 能 会 禁用 它 一 一 许多 大 公司 都 有 禁止 员工 启用 JavaScript 的 
规定 。noscript 元 素 可 以 用 来 应 对 这 些 用 户 ， 其 办 法 是 显示 不 需要 JavaScript 功 能 的 内 容 ， 再 不 济 
也 要 告诉 他 们 需要 启用 JavaScript 才 能 使 用 此 网 站 或 页 面 。 代 码 清单 7-25 是 一 个 用 noscript 元 素 显 




















示 一 条 简短 信息 的 例子 。 


代码 清单 7-25 ”使 用 noscript 元 素 


<!DOCTYPE HTML> 


<html> 
<head> 


<title>Example</title> 


<base 
<meta 
<meta 
<link 
<link 


href="http://titan/listings/"/> 

name="author" content="Adam Freeman"/> 

name-"description" content="A simple example"/> 
rel="stylesheet" type="text/css" href="styles.css"/> 
rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 


<script defer src="simple2.js"></script> 
<noscript> 

<hi>Javascript is required!</h1> 

<p>You cannot use this page without Javascript</p> 
</noscript> 


</head> 
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I like “code id="applecode">apples</code> and oranges. 
</p> 
«a href="http://apress.com">Visit Apress.com</a> 
<a href-"page2.html"»Page 2</a> 
</body> 
</html> 


这 个 noscript 元 素 的 效果 如 图 7-12 所 示 。 为 了 实现 这 个 效果 ， 我 先 在 浏览 器 中 禁用 了 
JavaScript 再 载 人 代码 清单 中 的 HTML 内 容 。 
f EI 
J By Example x We 


G 


各 Œ © titan/listings/example.htm! RY AA 











| 
Javascript is required! 


You cannot use this page without Javascript 


I like apples and oranges. 
EEC 


图 7-12 ”noscript 元 素 的 效果 
注意 ， 此 例 中 页 面 其 余部 分 的 处 理 一 切 如 常 ， 内 容 元 素 依然 会 显示 出 来 。 




















提示 一 个 页 面 中 可 以 加 入 多 个 noscript 元 素 ， 以 便 与 需要 脚本 控制 的 各 个 功能 区 域 相对 应 。 
在 提供 不 依赖 于 JavaScript 的 备用 标记 内 容 时 这 尤其 有 用 。 


除 此 之 外 还 有 一 种 选择 是 在 浏览 器 不 支持 JavaScript 时 将 其 引 至 另 一 个 URL。 这 需要 在 
noscript 元 素 中 加 入 一 个 meta 元 素 ， 如 代码 清单 7-26 所 示 。 


代码 清单 7-26 ”用 noscript 元 素 重 定向 浏览 


<!DOCTYPE HTML> 
<html> 
<head> 

<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel="stylesheet" type="text/css" href="styles.css"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«script defer src-"simple2.js"»«/script» 
«noscript» 
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<meta http-equiv="refresh" content="0; http://www.apress.com"/> 
</noscript> 
</head> 
<body> 
<p> 
I like <code id="applecode">apples</code> and oranges. 
</p> 
<a href-"http://apress.com"»Visit Apress.com</a> 
<a href="page2.html">Page 2</a> 
</body> 
</html> 


这 段 代 码 会 在 不 支持 JavaScript 或 禁用 了 JavaScript 的 浏览 器 试图 载 人 页 面 时 将 用 户 引 至 


www.apress.com 网 站 。 
7.4 小 结 


本 章 介 绍 了 文档 和 元 数据 元 素 。 在 HTML5 定 义 的 元 素 中 ， 它 们 不 算 最 有 生气 、 最 引 人 注 目 
的 一 类 , 但 却 极其 重要 。 要 想得到 满意 的 结果 , 就 必须 懂得 如 何 使 用 HTML 文 档 的 基础 构造 要 素 ， 
尤其 是 在 用 script 元 素 控制 脚本 执行 以 及 用 style 和 1ink 元 素 管理 样式 等 方面 。 
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现在 将 目光 从 大 尺度 的 、 结 构 性 的 文档 元 素 转 向 细 粒 度 层 次 : 文本 层面 的 元 素 ( 简称 文本 元 
素 )。 把 这 些 元 素 加 入 文本 当中 ， 也 就 引入 了 结构 和 含义 。 在 揣摩 本 章 例 子 的 过 程 中 可 以 明显 体 
会 到 这 一 点 。 

HTML5 规 范 明确 指出 : 使 用 元 素 应 该 完全 从 元 素 的 语义 出 发 。 但 是 ,为 了 让 大 家 都 过 得 轻 
松 一 点 , 规范 也 明确 表示 : 对 于 某 些 元 素 , 传统 上 与 其 联系 在 一 起 的 样式 也 是 语义 的 一 部 分 。 这 
有 点 敷衍 了 事 的 味道 ， 但 却 有 助 于 保持 与 日 版 HTML 的 兼容 。 

这 类 元 素 中 有 些 元 素 的 含义 非常 明确 。 例 如 ，cite 元 素 专门 用 来 引述 另 一 部 作品 ( 比如 书籍 
或 电影 ) 的 标题 。 然 而 许多 其 他 元 素 的 含义 却 比 较 含糊 , 实际 上 与 呈现 方式 虎 有 瓜葛 , 有 悖 HTML5 
标准 的 目标 。 

我 的 建议 是 务实 一 点 。 首 先 ， 如 果 存 在 符合 需求 的 专用 元 素 就 用 这 种 元 素 。 其 次 ， 避 开 那 些 
补 了 点 语义 脂粉 的 呈现 性 元 素 (如 bp 元 素 )， 把 呈现 工作 交 给 CSS 打 理 。 最 后 ， 不 管 选择 使 用 什么 
元 素 ， 都 要 在 HTML 文档 中 贯彻 始终 。 表 8-1 概 括 了 本 章 内 容 。 


表 8-1 本章 内 容 概要 











































































































































































































i — 8E 解决 方案 代码 清单 
生成 到 其 他 文档 的 超 链接 使 用 a 元 素 ， 将 其 href 属 性 值 设 置 为 绝对 或 相对 URL 8-1, 8-2 
生成 到 同一 文档 中 的 元 素 的 超 链接 重用 a 元 素 ,， 将 其 href 属 性 值 设置 为 类 似 CSS 中 针对 目标 元 。 8-3 

素 的 ID 选择 器 的 形式 

不 附带 任何 重要 性 含义 地 表示 一 段 文本 ”使 用 b 或 u 元 素 8-4、8-9 
表示 强调 更 用 em 元素 8-5 

表示 科学 术语 或 外 文 词语 VUE RETE 8-6 

表示 不 精确 或 不 正确 的 内 容 使 用 s 元 素 8-7 

表示 重要 更 用 strong 元 素 8-8 

表示 小 号 字体 部 分 i FA smal t 8-10 

表示 上 标 或 下 标 si FH supak subt% 8-11 

表示 换行 或 适合 换行 处 更 用 bz 或 wz 元素 8-12, 8-13 
表示 计算 机 代码 、 程 序 输出 、 变 量 或 用 ”使 用 code、var 、samp 或 kbd 元 素 8-14 
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( 续 ) 

ig 题 解决 方案 代码 清单 
表示 缩写 使 用 abbr 元 素 8-15 
表示 术语 定义 使 用 dfn 元 素 8-16 
表示 引用 内 容 使 用 q 元 素 8-17 
引用 其 他 作品 的 标题 使 用 cite 元 素 8-18 
表示 东亚 语言 中 的 注音 符号 使 用 ruby 、rt 和 rp 元 素 8-19 
表示 一 段 内 容 的 文本 方向 使 用 bdo 元 素 8-20 
出 于 文本 方向 的 考虑 将 文本 与 其 他 内 容 ”使 用 bdi 元 素 8-21, 8-22 
隔离 开 来 
对 一 段 内 容 应 用 全 局 属性 使 用 span 元 素 8-23 
表示 与 另 一 段 上 下 文 有 关 的 内 容 使 用 mark 元 素 8-24 
表示 插入 或 删除 的 文本 使 用 ins 或 del 元 素 8-25 
表示 时 间或 日 期 使 用 time 元 素 8-26 














8.1 生成 超 链接 


超 链 接 是 HTML 中 的 关键 特性 ， 是 用 户 赖 以 在 内 容 中 ( 在 同一 文档 中 和 不 同 页 面 间 ) 导航 的 
基础 。 超 链接 用 a 元 素 生成 。 表 8-2 概 括 了 这 个 元 素 。 


















































表 8-2 a 元 素 
元 素 a 
元 素 类 型 包含 短语 内 容 时 被 视 为 短语 元 素 ， 包 含 流 内 容 时 被 视 为 流 元 素 
允许 具有 的 父 元 素 可 以 包含 短语 元 素 的 任何 元 素 
局 部 属性 href, hreflang, media, rel, target, type 
内 容 短语 内 容 和 流 元 素 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 — 5 
在 HTML5 中 的 变化 。 ”该 元 素 现 在 既 能 包含 短语 内 容 也 能 包含 流 内 容 。media 属 性 是 新 增 的 。HTML4 中 已 弃 用 的 



































target 属 性 现在 又 被 恢复 。 在 HTML5 中 ， 不 含 href 值 的 a 元 素 作 为 超 链 接 的 占 位 符 使 用 。 原 
有 的 id、coords 、shape 、urn、charset methods, 、rev 属 性 现 已 不 再 使 


习惯 样式 a:link, a:visited { 
color: blue; 














am 


text-decoration:underline; cursor: auto; 
a:link:active, a:visited:active { 
color: blue; 


} 
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a 元 素 定义 了 6 个 局 部 属性 , 其 说 明 见 表 8-3。 这 些 属性 中 最 重要 的 是 href, 这 一 点 随后 就 能 看 出 来 。 


属 性 





表 8-3 ”a 元 素 的 局 部 属性 





















































说 — Hj 
href 指定 a 元 素 所 指 资 源 的 URL 
hreflang 说 明 所 链接 资源 使 用 的 语言 
media 说 明 所 链接 资源 用 于 哪 种 设备 。 该 属性 使 用 的 设备 和 特性 值 与 第 7 章 所 说 的 相同 
rel 说 明文 档 与 所 链 aoi oe 该 属性 与 第 7 章 介 绍 过 的 link 元 素 的 rel 属 性 使 用 相同 的 值 
target 间 定 用 以 打开 所 链接 资源 的 浏览 环 
type 








说 明 所 链接 资源 的 MIME 类 型 ( 比如 text/html ) 


8.1.1 生成 指向 外 部 的 超 链接 








ps 








将 a 元 素 的 href 属 性 设置 为 以 http:// 开 头 的 URL 即 可 生成 到 其 他 HTML 文 档 的 超 链接 。 用 户 点 











击 该 超 链接 时 ， 浏 览 器 就 会 加 载 指定 的 页 面 。 代 码 清 单 8-1 示 范 了 如 何 用 a 元 素 链接 到 外 部 内 容 。 


代码 清单 8-1 


使 用 a 元 素 链接 到 外 部 资源 


<!DOCTYPE HTML> 


<html> 
<hea 


d> 


<title>Example</title> 

<base href="http://titan/listings/"/> 

<meta name="author" content="Adam Freeman"/> 

«meta name-"description" content-"A simple example"/» 


«/head» 
«body» 


I like «a href="http://en.wikipedia.org/wiki/Apples">apples</a> and 


«/body» 


«/html» 





此 例 使 月 


«link rel="shortcut icon" href-"favicon.ico" type="image/x-icon" /> 


<a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>. 


目 了 两 个 a 元 素 ， 都 链接 到 维基 百科 上 的 文章 。 点 击 任何 一 个 链接 都 会 让 浏览 器 载 人 





相关 文章 供用 户 阅 读 。 图 8-1 显 示 了 超 链接 的 默认 样式 。 


r 





s 














Ern) 
Example WEE 
t€ Œ |O titan/listings/example.htm XA | 


| I like apples and oranges. | 














图 8-1 超 链 接 的 默认 外 观 





URL 不 一 定 都 要 指向 其 他 网 页 。 尽 管 URL 中 用 得 最 多 的 协议 就 是 http ， 但 浏览 器 也 支持 一 些 
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其 他 协议 ( 比如 https 和 ftp )。 如 果 想 引用 一 个 电子 邮箱 地 址 ， 那 么 可 以 使 用 mailto 协 议 ， 如 


mailto:adam@mydomain.com, 





fem “a 元 素 也 可 用 来 生成 基于 图 像 的 超 链 接 ( 用 户 打 开 超 链 接 时 点 击 的 不 是 文字 ， 而 是 图 像 )。 
这 需要 用 到 img 元 素 。 第 15 章 有 img 元 素 的 详细 介绍 和 一 个 基于 图 像 的 超 链接 的 示例 。 


8.1.2 ”使 用 相对 URL 

如 果 href 属 性 值 不 是 以 类 似 http:/ 这 样 的 已 知 协议 开头 ， 那 么 浏览 器 会 将 该 超 链 接 视 为 相对 
引用 。 默 认 情况 下 ， 浏 览 器 会 假定 目标 资源 与 当前 文档 位 于 同一 位 置 。 代 码 清单 8-2 就 是 一 个 相 
对 URL 的 例子 。 


代码 清单 8-2 在 超 链接 中 使 用 相对 URL 


<!DOCTYPE HTML» 

















«html» 
«head» 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«/head» 
«body» 
I like «a href="http://en.wikipedia.org/wiki/Apples">apples</a> and 
«a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>. 
You can see other fruits I like «a href="fruitlist.html">here</a>. 
«/body» 
«/html» 


此 例 将 href 属 性 的 值 设置 为 fruitlist.html。 用 户 点 击 这 个 链接 的 时 候 ， 浏览 器 会 用 当前 文档 
的 URL 来 确定 该 如 何 加 载 所 链接 的 页 面 。 例 如 ,假设 当前 文档 来 自 http:/www.mydomain.com/docs/ 
example.html， 那 么 浏览 需 将 会 从 这 个 位 置 加 载 目标 页 : http://www.mydomain.comy/doc.fruitlist.html。 














提示 “这 种 默认 行为 可 以 通过 用 base 元 素 提供 一 个 基础 URL 加 以 改变 ， 参 见 第 7 章 。 


8.1.3 生成 内 部 超 链接 


超 链 接 也 可 用 来 将 同一 文档 中 的 另 一 个 元 素 移 人 视野 。 为 此 需要 用 到 形 如 CSS 中 针对 目标 元 
素 的 ID 选择 器 的 表达 式 : #id>， 如 代码 清单 8-3 所 示 。 


代码 清单 8-3 ”生成 内 部 超 链接 


<!DOCTYPE HTML> 
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<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I like «a href-"http: //en.wikipedia.org/wiki/Apples"»apples«/a» and 
«a href="http://en.wikipedia.org/wiki/Orange_(fruit)">oranges</a>. 
You can see other fruits I like «a href="#fruits">here</a>. 
«p id="fruits"> 
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
</p> 
</body> 
</html> 











此 例 将 一 个 超 链接 的 href 属 性 值 设置 为 #fruits。 用 户 点 击 这 个 链接 时 ， 浏 览 器 将 在 文档 中 
查找 一 个 id 属性 值 为 fruits 的 元 素 。 如 果 该 元 素 不 在 视野 之 中 , 那么 浏览 器 会 将 文档 滚动 到 能 
见 它 的 位 置 。 




















提示 “如 果 浏 览 器 找 不 到 具有 指定 id 属性 值 的 元 素 ， 那 么 它 会 再 进行 一 次 查找 ， 试 图 找到 一 个 
name 属 性 值 与 其 匹配 的 元 素 。 


8.1.4 设 定 浏 览 环境 


target 属 性 的 用 途 是 告诉 浏览 器 希望 将 所 链接 的 资源 显示 在 哪里 。 默 认 情 况 下 ,浏览 器 使 用 
的 是 显示 当前 文档 的 窗口 、 标 签 页 或 窗 框 (frame )， 所 以 新 文档 将 会 取代 现在 显示 的 文档 ， 不 过 
还 有 其 他 选择 。 表 8-4 介 绍 了 target 属 性 可 以 使 用 的 值 。 


表 8-4” 供 3 元 素 的 target 属 性 使 用 的 值 






















































































属 性 dà 说 HB 
_blank 在 新 窗口 或 标签 页 中 打开 文档 
_parent 在 父 窗 框 组 (frameset) 中 打开 文档 
_self 在 当前 窗口 中 打开 文档 〈 这 是 默认 行为 ) 
_top 在 顶层 窗口 打开 文档 
<frame> 在 指定 窗 框 中 打开 文档 














以 上 每 一 个 值 都 代表 一 个 浏览 环境 (browsing context )。_blank 和 _self 这 两 个 值 不 言 而 喻 ， 
其 他 值 与 窗 框 的 使 用 有 关 ， 说明 见 第 15 章 。 
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8.2 用 基本 的 文字 元 素 标记 内 容 


本 书 要 介绍 的 第 一 批文 字 元 素 出 现在 HTML 中 已 经 有 很 长 时 间 了 。 其 中 有 些 元 素 过 去 的 用 途 
是 设置 文字 格式 , 但 是 随 着 HTML 的 发 展 ， 为 顺应 语义 与 呈现 分 离 的 原则 ,它们 现在 的 含义 变 得 
更 为 一 般 化 了 。 


8.2.1 表示 关键 词 和 产品 名 称 


b 元 素 可 以 用 来 标记 一 段 文字 ,但 并 不 表示 特别 的 强调 或 重要 性 。HTML5 规 范 中 给 出 的 例子 
是 文章 提要 中 的 关键 词 和 产品 评论 中 的 产品 名 称 。 表 8-5 概 括 了 b 元 素 。 















































































































































表 8-5 ”b 元 素 
元 素 b 
元 素 类 型 短语 
允许 具有 的 父 元 素 可 以 包含 短语 内 容 的 任何 元 素 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 f? 
在 HTML5 中 的 变化 在 HTML4 中 pb 元 素 只 具有 呈现 性 质 的 含义 。 在 HTML5 中 ， 其 语义 如 前 所 述 。 其 呈现 性 的 一 
面 已 被 降格 为 习惯 样式 
习惯 样式 b { font-weight: bolder; } 























b 元 素 的 作用 非常 简单 : 它 的 开始 标签 和 结束 标签 之 间 的 内 容 会 从 周围 内 容 中 凸现 出 来 。 这 通 
常 是 将 其 内 容 加 粗 , 不 过 也 可 以 用 CSS 改 变 应 用 于 b 元 素 的 样式 。 代码 清单 8-4 示 范 了 b 元 素 的 用 法 。 


代码 清单 8-4 ”使 用 b 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel="stylesheet" type="text/css" href="styles.css"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«/head» 
«body» 
I like «b»apples«/b» and <b>oranges</b>. 
</body> 
</html> 


从 图 8-2 中 可 以 看 到 b 元 素 的 习惯 样式 。 
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f i Se) 


Example 
€ Œ | Q titan/listings/examplehtml WA 


I like apples and oranges. | 























图 8-2 ”使 用 b 元 素 








8.2.2 ”加 以 强调 


em 元 素 表示 对 一 段 文字 的 强调 。 这 可 以 用 来 向 读者 提供 关于 句子 或 段落 含义 的 一 种 语 境 。 本 


节 稍 后 会 对 此 作出 解释 。 现 在 先 来 看 看 表 8-6 中 em 元 素 的 概要 说 明 。 
表 8-6 ”en 元 素 















































元 素 em 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 

内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 否 

在 HTML5 中 的 变化 无 

习惯 样式 em { font-style: italic; } 


代码 清单 8-5 示 范 了 em 元 素 的 用 法 。 
代码 清单 8-5 ”使 用 em 元 素 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
<em>I</em> like «b»apples«/b» and <b>oranges</b>. 
«/body» 
</html> 





14 


这 个 元 素 的 习惯 样式 是 斜体 字 ， 如 图 8-3 所 示 。 
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; 国 Example 
€ Q | O titan/listings/examplehtm! WA 








| Ilike apples and oranges. 








— i — 


图 8-3 ”使 用 em 元 素 


此 例 对 句子 开头 的 I 进行 了 强调 。 在 考虑 em 元 素 的 时 候 ， 一 个 行 之 有 效 的 做 法 是 : 把 句子 大 
声 读 出 来 ， 并 且 虚 拟 一 个 提问 ， 假 想 这 就 是 答案 。 例 如 ， 假 设 有 人 在 问 :“ 喜 欢 苹果 和 橙子 的 是 
谁 ? ”你 会 这 样 回答 :“ 我 喜欢 蔷 果 和 橙子 。 大声 说 出 这 句 话 并 且 在 “我 ” 字 上 加 重 语气 , 这 就 
明确 表示 喜欢 这 些 水 果 的 人 是 你 。 

如 果 别 人 问 的 是 :“ 你 喜欢 苹果 和 什么 水 果 ? ”你 可 能 会 回答 :“ 我 喜欢 苹果 和 橙子 。” 此 时 
你 会 在 最 后 一 个 词 上 加 重 语气 , 强调 橙子 是 你 喜欢 的 另 一 种 水 果 , 这 体现 在 下 面 的 HTML 代 码 中 : 


I like apples and <em>oranges</em>. 












































8.2.3 ”表示 外 文 词语 或 科技 术语 


i 元 素 表 示 一 段 文字 与 周围 内 容 有 本 质 区 别 。 这 个 定义 比较 含糊 ， 不 过 这 个 元 素 常 用 的 地 方 
包括 外 文 词语 、 科 技术 语 甚 至 某 人 的 想法 ( 与 言语 相 区 别 )。 表 8-7 是 i 元 素 的 说 明 。 















































表 8-7 i 元 素 
元 素 i 
元 素 类 型 短语 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 f? 
在 HTML5 中 的 变化 在 HTML4 中 i 元 素 只 具有 呈现 性 质 的 含义 。 在 HTML5 中 ， 其 语义 如 前 所 述 。 其 呈现 性 的 一 












































面 已 被 降格 为 习惯 样式 
习惯 样式 i { font-style: italic; } 




















代码 清单 8-6 示 范 了 i 元 素 的 用 法 。 
代码 清单 8-6 ”使 用 i 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
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<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 

«/head» 

«body» 
«em»I«/em» like <b>apples</b> and <b>oranges</b>. 
My favorite kind of orange is the mandarin, properly known 
as «i»citrus reticulata</i>. 

</body> 

</html> 


图 8-4 显 示 了 i 元 素 的 效果 。 注 意 该 元 素 的 习惯 样式 与 em 元 素 相 同 。 这 是 元 素 的 含义 有 别 于 其 
呈现 的 好 例子 。 








国 Example E 
| € CQ Q titan/listings/example.htm XA 


| Ilike apples and oranges. My favorite kind of orange is the | 
| mandarin, properly known as citrus reticulata. | 
































图 8-4 ”使 用 i 元 素 


8.2.4 ”表示 不 准确 或 校正 


s 元 素 用 来 表示 一 段 文字 不 再 正确 或 准确 。 其 习惯 样式 是 在 文字 上 显示 一 条 删除 线 。 表 8-8 是 
s 元 素 的 说 明 。 





































































































表 8-8 sA 
元 素 E 
元 素 类 型 短语 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 f 
在 HTML5 中 的 变化 在 HTML4 中 s 元 素 只 具有 呈现 性 质 的 含义 。 在 HTML5 中 ， 其 语义 如 前 所 述 。 其 呈现 性 的 
一 面 已 被 降格 为 习惯 样式 
习惯 样式 s { text-decoration: line-through; } 








代码 清单 8-7 示 范 了 s 元 素 的 用 法 。 
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代码 清单 8-7 使 用 s 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«em»I«/em» like <b>apples</b> and <b>oranges</b>. 
My favorite kind of orange is the mandarin, properly known 
as «i»citrus reticulata</i>. 
Oranges at my local store cost «s»$1 each«/s» $2 for 3. 























«/body» 
«/html» 
s 元 素 的 习惯 样式 如 图 8-5 所 示 。 
ie 2/8 
Example W 
€ Q | O titan/listings/example.htm XA | 
| Ilike apples and oranges. My favorite kind of orange is the 
| mandarin, properly known as citrus reticulata. Oranges at my 
local store cost $teaeh $2 for 3. 
L- J 








图 8-5 ”使 用 s 元 素 


8.25 ”表示 重要 的 文字 
strong 元 素 表 示 一 段 重要 文字 。 表 8-9 是 该 元 素 的 说 明 。 


表 8-9 ”strong 元 素 






































元 素 strong 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 

内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f? 

在 HTML5 中 的 变化 无 








习惯 样式 strong { font-weight: bolder; } 
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代码 清单 8-8 示 范 了 strong 元 素 的 用 法 。 
代码 清单 8-8 ”使 用 strong 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"stylesheet" type-"text/css" href-"styles.css"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I like apples and oranges. 
«strong»Warning:«/strong» Eating too many oranges can give you heart burn. 
</body> 
</html> 


这 个 例子 在 前 一 个 例子 的 基础 上 删 去 了 一 些 文字 以 便 阅 读 。strong 元 素 的 习惯 样式 如 图 8-6 
所 示 。 这 方面 它 与 b 元 素 相同 。 但 是 要 注意 ，b 元 素 并 未 赋予 其 包围 的 文字 任何 重要 性 。 标 记 内 容 
的 时 候 要 选择 正确 的 元 素 ， 这 很 重要 。 


r 






































a) 
Example WE 
€ Œ | © titan/listings/example.htm XA 
| I like apples and oranges. Warning: Eating too many oranges can 
| give you heart burn. 
= — 























图 8-6 ”使 用 strong 元 素 





8.2.6 ”为 文字 添加 下 划 线 
u 元 素 让 一 段 文 字 从 周围 内 容 中 凸现 出 来 ,但 并 不 表示 强调 或 其 重要 性 有 所 增加 。 这 个 说 明 
很 含糊 。u 元 素 以 前 只 具有 呈现 方面 的 作用 ( 为 文字 加 上 下 划 线 ) 没有 实际 的 语义 。 实 际 上 这 仍 
是 一 个 呈现 性 的 元 素 ， 其 效果 是 为 文字 添加 下 划 线 ( 尽管 可 以 用 CSS 改 变 这 种 行为 ,但 是 我 不 赞 
成 用 这 种 方式 改变 元 素 的 用 途 )。 表 8-10 概 括 了 u 元 素 。 
表 8-10 ut 















































元 素 u 
元 素 类 型 短语 














允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
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(E) 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 f 
在 HTML5 中 的 变化 在 HTML4 中 u 元 素 只 具有 呈现 性 的 含义 。 在 HTML5 中 ， 其 语义 如 前 所 述 。 其 呈现 性 的 一 
面 已 被 降格 为 习惯 样式 
习惯 样式 u { text-decoration:underline; } 








u 元 素 的 习惯 样式 与 a 元 素 类 似 。 因 此 用 户 往往 会 把 加 下 划 线 的 文字 误 认为 超 链接 。 为 了 防止 
引起 混淆 ， 应 该 尽量 避免 使 用 u 元 素 。 代 码 清单 8-9 示 范 了 u 元 素 的 用 法 。 


代码 清单 8-9 使 用 u 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<base href="http://titan/listings/"/> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel="stylesheet" type="text/css" href="styles.css"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
I like apples and oranges. 
«strong»Warning:«/strong» Eating «u»too many«/u» oranges can give you heart burn. 
</body> 
</html> 


从 图 8-7 中 可 以 看 到 该 元 素 以 习惯 样式 显示 在 浏览 器 中 的 样子 。 
( — Lo). ames) 

















J B Example TAn T: we! 
| € Q Otitan/ istings/example.htmi| whl | 
I like apples and oranges. Warning: Eating too many oranges can 
give you heart burn. 
| J 











图 8-7 ”使 用 u 元 素 


8.2.7 添加 小 号 字体 内 容 


small 元 素 表示 小 号 字体 内 容 ( fine print ), 常用 于 免责 声明 和 澄清 声明 。 表 8-11 概 括 了 sma]l] 元 素 。 
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表 8-11 small 元 素 




































































元 素 small 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 

局 部 属性 无 

内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 T 

在 HTML5 中 的 变化 在 HTML4 中 small 元 素 只 具有 呈现 性 的 含义 。 在 HTML5 中 ， 其 语义 如 前 所 述 。 其 呈现 性 的 
一 面 已 被 降格 为 习惯 样式 

习惯 样式 small { font-size: smaller; } 





代码 清单 8-10 示 范 了 smal1 元 素 的 用 法 。 
代码 清单 8-10 ”使 用 smal1 元 素 


<!DOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
Oranges at my local store are $1 each «small»(plus tax)«/small» 
</body> 
</html> 


small 元 素 的 习惯 样式 如 图 8-8 所 示 。 

f Ls mn 
| By Example x Yee) i . 

c Q | Q titan/listings/example.htm wf 





{4 





Oranges at my local store are $1 each (plus tax) 














图 8-8 ”使 用 smal1 元 素 


8.2.8 添加 上 标 和 下 标 


sub 和 sup 元 素 分 别 用 于 表示 下 标 和 上 标 。 有 些 语言 需要 用 到 上 标 ， 而 在 数学 中 ， 一 个 简单 的 
表达 式 也 会 用 到 上 标 和 下 标 。 表 8-12 概 括 了 这 两 个 元 素 。 
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表 8-12 sub 和 sup 元 素 


























元 素 sub 和 和 sup 
元 素 类 型 短语 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 f 
在 HIML5 中 的 变化 无 
习惯 样式 sub { vertical-align: sub;font-size: smaller; } 





sup { vertical-align: super;font-size: smaller;} 
代码 清单 8-11 示 范 了 sub 和 sup 元 素 的 用 法 。 
代码 清单 8-11 使 用 sub 和 sup 元 素 


<!DOCTYPE HTML» 


«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
The point x«sub»10«/sub» is the 10<sup>th</sup> point. 
</body> 
</html> 


这 两 个 元 素 的 习惯 样式 如 图 8-9 所 示 。 





E Example 
€ Œ | Q titan/listings/example.htm ZA 


The point x19 is the 10" point. 











图 8-9 使 用 sub 和 sup 元 素 
8.8 换行 

有 两 个 元 素 可 以 用 来 控制 内 容 换行 : br 和 wbr 元 素 。 
8.3.1 强制 换行 

















br 元 素 会 引起 一 次 换行 。 其 习惯 样式 是 将 后 续 内 容 转移 到 新 行 上 。 表 8-13 概 括 了 br 元 素 。 
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表 8-13 ”br 元 素 




















元 素 br 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 

局 部 属性 无 

内 容 无 

标签 用 法 虚 元 素 形 式 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 无 

习惯 样式 让 后 续 内 容 从 新 行 开始 显示 (无 法 用 CSS 办 到 ) 

















代码 清单 8-12 示 范 了 br 元 素 的 用 法 。 


注意 ”br 元 素 只 宜 用 在 换行 也 是 内 容 的 一 部 分 的 情况 ， 如 代码 清单 8-12。 切 勿 用 它 创建 段落 或 
别 的 内 容 组 。 那 是 其 他 元 素 的 任务 。 参 见 第 9 章 和 第 10 章 。 


代码 清单 8-12 ”使 用 br 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I WANDERED lonely as a cloud«br/» 
That floats on high o'er vales and hills,«br/» 
When all at once I saw a crowd,«br» 
A host, of golden daffodils; 
</body> 
</html> 


从 图 8-10 中 可 以 看 到 br 元 素 是 如 何 对 浏览 器 显示 的 内 容 产 生 影响 的 。 
Í Wla) 
} Example 是 N * 

| € Œ |Q titan/listings/example.htm wht 
I WANDERED lonely as a cloud 

That floats on high o'er vales and hills. 


When all at once I saw a crowd, | 
A host, of golden daffodils: | 




















图 8-10 ”使 用 br 元 素 
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8.3.2 ”指明 可 以 安全 换行 的 建议 位 置 


wbr 元 素 是 HTML5 中 新 增 的 ， 超过 当前 浏览 器 窗口 的 内 容 适 合 在 此 换行 ， 究 竟 
换 不 换行 由 浏览 器 决定 。 wbr 元 素 只 不 过 是 对 恰当 的 换行 位 置 的 建议 而 已 。 表 8- 14 概 括 了 wbr 元 素 。 


表 8-14 ”wbr 元 素 






































元 素 wbr 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 

局 部 属性 无 

内 容 无 

标签 用 法 虚 元 素 形 式 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 如 果 需 要 换行 ， 则 从 新 行 开 始 显示 后 续 内 容 








代码 清单 8-13 示 范 了 如 何 用 wbr 元 素 帮 助 浏览 器 显示 一 个 很 长 的 单词 。 
代码 清单 8-13 ”使 用 wbr 元 素 


<!DOCTYPE HTML> 








«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«/head» 
«body» 
This is a very long word: Super«wbr»califragilistic«wbr»expialidocious. 
We can help the browser display long words with the «code»wbr«/code» element. 
«/body» 
«/html» 
要 明白 wbr 元 素 的 价值 所 在 ,就 得 比较 一 下 ， 看 看 浏览 器 在 使 用 和 不 使 用 该 元 素 这 两 种 情况 


下 的 表现 有 什么 不 同 。 图 8-11 展 示 了 没有 wbr 元 素 时 浏览 器 处 理 这 段 内 容 的 方式 。 
[ ee) 
j 国 Example WoE v | 

€ Œ | O titan/listings/exam| yy | A 





^ 


This is a very long word: 一 
Supercalifragilisticexpialidocious. We can | 
区 a the browser display long words with the — | 


ENS =ale ont 








— = J 





图 8-11 没有 wbr 元 素 时 的 换行 
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不 使 用 wbr 元 素 时 ， 浏览 器 会 将 长 单词 作为 一 个 整体 进行 处 理 。 这 导致 文字 的 第 一 行 右 端 白 
白浪 费 了 一 大 截 空 白 区 域 。 如 果 像 代码 清单 8-13 那 样 用 上 wbr 元 素 ， 那 么 浏览 器 在 此 问题 上 会 有 
更 多 选择 ， 如 图 8-12 所 示 。 





G 





kalak) 
j 国 Example x Map INS 


c 


CO titan/listings/exam| yy | 入 


This is a very long word: Supercalifragilistic 
| expialidocious. We can help the browser 
| display long words with the wor element. 





b: 


























图 8-12 ”使 用 了 wbr 元 素 时 的 换行 


有 了 wp 元素， 浏览 器 就 能 将 一 个 长 单词 分 为 几 小 截 ， 从 而 更 加 得 体 地 换行 。 使 用 wbr 元 素 ， 
就 是 告诉 浏览 器 一 个 单词 最 适合 在 什么 地 方 拆 分 。 


8.4 表示 输入 和 输出 




















有 四 个 元 素 暴露 了 HTML 的 极 客 起 源 。 它 们 代表 的 是 计算 机 的 输入 和 输出 。 表 8-15 概 括 了 这 
些 元 素 。 它 们 都 没有 定义 局 部 属性 ， 都 不 是 HTML5 中 新 增 的 ， 在 HTML5 中 也 没有 任何 改变 。 














表 8-15 ”用 于 输入 和 输出 的 文字 元 素 
元 X 说 








明 习惯 样式 
code 表示 计算 机 代码 片段 code { font-family: monospace; } 
var 





在 编程 语 境 中 表示 变量 。 也 可 表示 
象 中 插入 一 个 指定 值 的 占 位 符 


表示 程序 或 计算 机 系统 的 输出 
表示 用 户 输入 

















个 供 读 者 在 想 var { font-style: italic; } 

















samp { font-family: monospace; } 











kbd { font-family: monospace; } 


代码 清单 8-14 示 范 了 如 何在 文档 中 使 用 这 四 个 元 素 。 


代码 清单 8-14 使 用 code、var、samp 和 kbd 元 素 
<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 


«p» 
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«code»var fruits = ["apples", "oranges", "mangoes", "cherries"];«br» 
document.writeln("I like " + fruits.length + " fruits");</code> 

</p> 

<p>The variable in this example is <var>fruits</var></p> 

<p>The output from the code is: <samp>I like 4 fruits</samp></p> 

«p»When prompted for my favorite fruit, I typed: «kbd»cherries«/kbd» 

</body> 
</html> 


这 些 元 素 的 习惯 样式 如 图 8-13 所 示 。 其 中 有 三 个 元 素 具 有 相同 的 习惯 样式 。 例 中 用 p 元 素 组 
织 了 一 下 内 容 (p 元 素 的 介绍 见 第 9 章 )。 











cle) 
By Example 
€ C! |Q titan/listings/example.htm wit 
| var fruits = ["apples", "oranges", "mangoes", "cherries"]; 


| document.writeln("I like " + fruits.length + " fruits"); 


| The variable in this example is fruits 





| The output from the code is: I like 4 fruits 
| 


| When prompted for my favorite fruit, I typed: cherries 





Is 


图 8-13 ”使 用 code、var 、samp 和 kbd 元 素 

















8.5 使 用 标题 引用 、 引 文 、 定 义 和 缩 与 


下 面 要 讲 的 四 个 元 素 可 以 用 来 表示 标题 引用 、 引 文 、 定 义 及 缩写 。 它 们 在 科学 和 学 术 领 域 的 
文章 中 经 常 使 用 。 


8.5.1 表示 缩写 
abbT 元 素 用 来 表示 缩写 。 其 title 属 性 表示 的 是 该 缩写 代表 的 完整 词语 。 表 8-16 概 括 了 这 个 元 素 。 


表 8-16 ” abbr 元 素 












































元 素 abbr 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 

局 部 属性 无 。 但 全 局 属性 title 具 有 特殊 含义 
内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f? 

在 HTML5 中 的 变化 无 





习惯 样式 无 
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代码 清单 8-15 示 范 了 abbr 元 素 的 用 法 。 
代码 清单 8-15 ”使 用 abbr 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 


H 


like apples and oranges. 
The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida 
citrus industry. 
</body> 
</html> 


abbr 元 素 没有 习惯 样式 ， 因 此 它 包 含 的 内 容 看 上 去 没有 什么 特别 之 处 。 





8.5.2 ”定义 术语 


dfn 元 素 表 示 定 义 中 的 术语 ， 也 即 在 用 来 解释 一 个 词 ( 或 短语 ) 的 含义 的 句子 中 的 词 (或 短 
语 )。 表 8-17 概 括 了 这 个 元 素 。 


表 8-17 ”dfn 元 素 





















































元 素 dfn 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 。 但 全 局 属性 title 具 有 特殊 含义 
内 容 文字 或 一 个 abbr 元 素 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 ff 

在 HTML5 中 的 变化 无 

习惯 样式 无 





dfn 元 素 有 一 些 使 用 规则 。 如 果 要 为 dfn 元 素 设 置 title 属 性 , 那么 必须 将 其 设置 为 所 定义 的 术 
语 。 代 码 清单 8-16 就 是 一 个 这 样 使 用 dfn 元 素 的 例子 。 


代码 清单 8-16 ”使 用 dfn 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
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<meta name="author" content="Adam Freeman /> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I like apples and oranges. 
The «abbr title-"Florida Department of Citrus">FDOC</abbr> regulates the Florida 
citrus industry. 


«p» 
The «dfn title-"apple"»apple«/dfn» is the pomaceous fruit of the apple tree, 
species Malus domestica in the rose family. 
</p> 
</body> 
</html> 


如 果 dfn 元 素 包含 一 个 abbr 元 素 ， 那 么 该 缩写 词 就 是 要 定义 的 术语 。 如 果 元 素 内 容 为 文字 并 
且 没 有 title 属 性 ， 那 么 其 文字 内 容 就 是 要 定义 的 术语 。 该 元 素 没有 习惯 样式 ， 因 此 其 内 容 看 上 
去 没有 什么 特别 之 处 。 
8.5.3 引用 来 自 他 处 的 内 容 
q 元 素 表示 引 自 他 处 的 内 容 。 表 8-18 概 括 了 q 元 素 。 
表 8-18 gts 





















































元 素 9 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 cite 

ne 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 ED 

在 HTML5 中 的 变化 X 

习惯 样式 q { display: inline; } 


q:before { content: open-quote; } 
q:after { content: close-quote; } 


RN 





前 一 个 例子 中 术语 apple 的 定义 来 自 维基 百科 ， 应 该 妥 
来 指定 来 源 文章 的 URL， 如 代码 清单 8-17 所 示 。 


代码 清单 8-17 使 用 q 元 素 


<!DOCTYPE HTML» 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 





注 明 出 处 。q 元 素 的 cite 属 性 可 以 用 





q 
WwW 
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«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I like apples and oranges. 
The «abbr title-"Florida Department of Citrus">FDOC</abbr> regulates the Florida 
citrus industry. 
«p» 
<q cite="http://en.wikipedia.org/wiki/Apple">The 
<dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree, 
species Malus domestica in the rose family.</q> 
</p> 
</body> 
</html> 


4 元 素 的 习惯 样式 使 用 CSS 中 的 :before 和 :after 这 两 个 伪 元 素 选 择 器 在 引文 前 后 生成 引号 ， 
如 岁 8-14 所 示 。 伪 元 素 选择 器 的 介绍 见 第 17 章 和 第 18 章 。 


r 

















lid eample WE 
€ Q | O titan/listings/example.htm i A 


I like apples and oranges. The FDOC regulates the Florida citrus industry. 


| "The apple is the pomaceous fruit of the apple tree, species Malus domestica in the 
rose family." 








U nnn -— - — X 


图 8-14 ”使 用 q 元 素 




















8.5.4 引用 其 他 作品 的 标题 
cite 元 素 表 示 所 引用 作品 ( 如 图 书 、 文 章 、 电 影 和 诗歌 ) 的 标题 。 表 8-19 概 括 了 cite 元 素 。 














#28-19 cite 元 素 









































元 素 cite 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 

局 部 属性 无 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 fü 

在 HTML5 中 的 变化 cite 元 素 不 能 再 用 来 引用 人 名 ， 只 能 用 于 作品 标题 
习惯 样式 cite { font-style: italic; } 











代码 单 8-18 示 范 了 cite 元 素 的 用 法 。 
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代码 清单 8-18 ”使 用 cite 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I like apples and oranges. 
The «abbr title-"Florida Department of Citrus">FDOC</abbr> regulates the Florida 
citrus industry. 
«p» 
<q cite-"http: //en.wikipedia.org/wiki/Apple"»The 
«dfn title-"apple"»apple«/dfn» is the pomaceous fruit of the apple tree, 
species Malus domestica in the rose family.«/q» 
</p> 
My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite> 
by Stuppy & Kesseler 
</body> 
</html> 


其 习惯 样式 如 图 8-15 所 示 。 
| == 


/ GJ Example 
4 Q | Q titan/listings/example.html wv A 


I like apples and oranges. The FDOC regulates the Florida citrus industry. | 














"The apple is the pomaceous fruit of the apple tree, species Malus | | 
domestica in the rose family." | 
| 


My favorite book on fruit is Fruit: Edible, Inedible, Incredible by 
Stuppy & Kesseler 











图 8-15 ”使 用 cite 元 素 











8.6 ”使 用 语言 元 素 


有 五 个 HTML 元 素 ( 其 中 四 个 是 HTML5 中 新 增 的 ) 的 用 途 是 为 使 用 非 西方 语言 提供 支持 , 接 
下 来 我 们 就 来 看 看 。 


























8.6.1 ruby, rt 和 rp 元 素 


注音 符号 (ruby character ) 是 用 来 帮助 读者 掌握 表意 语言 ( 如 汉语 和 日 语 ) 文字 正确 发 音 
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的 符号 ， 位 于 这 些 文字 上 方 或 右 方 。ruby 元 素 表示 一 段 包 含 注音 符号 的 文字 。 表 8-20 概 括 了 该 
元 素 。 


表 8-20 ruby 元 素 





























元 素 ruby 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 

内 容 短语 内 容 及 rt 和 rp 元 素 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 
在 HTML5 中 的 变化 无 
习惯 样式 ruby { text-indent: 0; } 











ruby 元 素 需 要 与 ft 元 素 和 1p 元 素 措 配 使 用 。 后 面 两 个 元 素 也 是 HTMLS 中 新 增 的 。rt 元 素 用 来 
标记 注音 符号 ，zp 元 素 则 用 来 标记 供 不 支 持 注音 符号 特性 的 浏览 器 显示 在 注音 符号 前 后 的 括号 。 
代码 清单 8-19 是 一 个 包含 注音 符号 的 例子 。" 


代码 清单 8-19 ”使 用 ruby、rt 和 rp 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 


«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 


body { font-size: 4em; } 
</style> 
</head> 
<body> 
«ruby» f& «rp» («/rp»«rt»chi«/rt»«rp»)«/rp»«/ruby» 
«ruby» & «rp» («/rp»«rt»meéi«/rt»«rp»)«/rp»«/ruby» 
«ruby» 4a «rp» («/rp»«rt»wüng«/rt»«rp»)«/rp»«/ruby» 


«ruby» sa «rp» («/rp»«rt»liüng«/rt»«rp»)«/rp»«/ruby» 
</body> 
</html> 


这 个 文档 显示 在 支持 注音 符号 的 浏览 
作为 注音 符号 显示 ， 如 图 8-16 所 示 。 

















带 中 时 ,rp 元 素 及 其 内 容 会 被 忽略 ,rt 元 素 的 内 容 则 会 














A 


Qz 原著 中 作者 在 此 句 之 后 言 道 :“ 我 一 门 表 意 语言 都 不 会 讲 ， 所 以 没有 条 人 




















F 设 计 一 个 使 用 表意 文字 的 例子 。 在 此 我 
能 做 的 只 是 用 英语 文字 演示 浏览 器 显示 注音 符号 的 方式 。” 为 了 方便 读者 ， 中 文 版 改写 了 代码 清单 8-19 中 的 例子 ， 
并 相应 地 更 换 了 图 8-16 和 图 8-17。 一 一 译 者 注 



































8.6 ”使 用 语言 元 素 149 





D Example 
^ C D file:///C:/Users/Telethirse = 


chi mèi wing lidng 


A TER JU A 


图 8-16 ”使 用 rupy、rt 和 rp 元 素 


如 果 用 不 文 持 注音 符号 的 浏览 器 显示 该 文档 , 那么 rzp 和 Tt 元 素 的 内 容 都 会 被 显示 出 来 。 在 扎 
写本 章 的 时 候 ，Firefox 还 不 支持 注音 符号 ， 用 它 显 示 该 文档 的 结果 如 网 8-17 所 示 。 























[3 Example 
GC Dfile:///C:/Users/Telethits? = 


chi mèi wang  liáng 





d 魅 d UH 


图 8-17 “在 不 支持 注音 符号 的 浏览 器 中 的 显示 结 





8.6.2 bdo 元 素 


bdo 元 素 可 以 用 来 搬 开 默认 的 文字 方向 设置 , 明确 地 指定 其 内 容 中 文字 的 方向 。 表 8-21 概 括 了 
bdo 元 素 。 


表 8-21 ”bdo 元素 


























元 素 bdo 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 。 但 是 必须 要 有 全 局 属性 dir 
内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f? 

在 HTML5 中 的 变化 无 

习惯 样式 无 











使 用 bdo 元 素 必 须 加 上 dir 属 性 。 该 属性 允许 使 用 的 值 有 rt1 ( 从 右 到 左 ) Mltr ( 从 左 到 右 )。 
代码 清单 8-20 示 范 了 bdo 元 素 的 用 法 。 
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代码 清单 8-20 ”使 用 bdo 元 素 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I like apples and oranges. 
The «abbr title-"Florida Department of Citrus"»FDOC«/abbr» regulates the Florida 
citrus industry. 
«p» 
This is left-to-right: «bdo dir-"ltr"»I like oranges«/bdo» 
</p> 
<p> 
This is right-to-left: «bdo dir-"rtl"»I like oranges</bdo> 
</p> 
</body> 
</html> 


该 元 素 的 内 容 在 浏览 器 中 的 显示 效果 如 图 8-18 所 示 。 


r 








c» 
Example T X 


€ Q | Q titan/listings/example.htm Yr A 
I like apples and oranges. The FDOC regulates the Florida citrus industry. 
This is left-to-right: I like oranges 


This is right-to-left: segnaro ekil I 














Ne — 


图 8-18 ”使 用 bdo 元 素 











8.6.3 bdi 元 素 


bdi 元 素 表 示 一 段 出 于 文字 方向 考虑 而 与 其 他 内 容 隔离 开 来 的 文字 。 表 8-22 概 括 了 这 个 
元 素 。 


表 8-22 ”bdi 元 素 














元 素 bdi 
元 素 类 型 短语 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 











局 部 属性 x 
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( 续 ) 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 是 
在 HTML5 中 的 变化 无 
习惯 样式 无 


这 个 元 素 适 用 于 和 欲 显示 内 容 的 文字 方向 未 知 的 情况 。 在 这 种 情况 下 , 浏览 器 会 自动 确定 文字 
方向 ， 这 有 可 能 搅乱 页 面 布局 。 代 码 清单 8-21 中 的 例子 展示 了 这 个 问题 。 


代码 清单 8-21 未 使 用 bdi 元 素 的 情况 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«meta charset-"utf-8"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I like apples and oranges. 


Here are some users and the fruit they purchased this week: 


«p»Adam: 3 applies and 2 oranges«/p» 
«p»is Ase? 2 apples</p> 
«p»Joe: 6 apples«/p» 
</body> 
</html> 


显示 这 个 文档 时 ， 其 中 的 阿拉 伯 名 字 会 导致 浏览 器 的 文字 方向 算法 将 数字 2 显示 在 名 字 之 前 
而 不 是 之 后 ， 如 图 8-19 所 示 。 






































| Se) 

| BY Semple ta = a 

| € CO titan/listings/example.htm wit | 
I like apples and oranges. Here are some users and the fruit they purchased this week: | 
Adam: 3 applies and 2 oranges 

| 2 LS s apples 
Joe: 6 apples 





图 8-19 多 种 语言 文字 混合 时 双向 文字 算法 的 效果 


这 个 问题 可 以 用 bdi 元 素 解决 ， 如 代码 清单 8-22 所 示 。 
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代码 清单 8-22 ”使 用 bdi 元 素 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«meta charset-"utf-8"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
I like apples and oranges. 
Here are some users and the fruit they purchased this week: 
<p><bdi>Adam</bdi>: 3 applies and 2 oranges</p> 
<p><bdirias Ange «/bdi» : 2 apples</p> 
«p»«bdi»Joe«/bdi»: 6 apples«/p» 
«/body» 
</html> 
这 个 元 素 的 校正 效果 如 图 8-20 所 示 。 
f pen | 
By Eample V = 
€ Q | O titan/listings/example.htm wf 


I like apples and oranges. Here are some users and the fruit they purchased this week: 
Adam: 3 applies and 2 oranges 
aS si: 2 apples 


Joe: 6 apples 








图 8-20 ”使 用 bdi 元 素 


8.7 ”其 他 文本 元 素 
还 有 四 个 元 素 不 好 归 为 前 述 任何 一 类 ， 这 里 一 并 介绍 。 
8.7.1 表示 一 段 一 般 性 的 内 容 


span 元 素 本 身 没 有 任何 含义 。 它 可 以 用 来 把 一 些 全 局 属性 应 用 到 一 段 内 容 上 。 表 8-23 概 括 了 
span 元 素 。 

















表 8-23 span 元 素 
元 素 span 
元 素 类 型 短语 
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CER) 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 f 
在 HTML5 中 的 变化 无 
习惯 样式 无 





代码 清单 8-23 中 的 例子 使 用 了 带 class 属 性 的 span 元 素 , 以 便 将 相关 内 容 作 为 CSS 样 式 的 应 用 
目标 。 


代码 清单 8-23 ”使 用 span 元 素 
<!DOCTYPE HTML> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 


«meta name-"description" content-"A simple example"/> 


«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 


.fruit ( 
border: thin solid black; 
padding: 1px; 
} 
</style> 
</head> 
<body> 
I like <span class="fruit">apples</span> and <span class="fruit">oranges</span>. 
</body> 
</html> 


样式 应 用 后 的 效果 如 图 8-21 所 示 。 














j By Example bv 


€ Q |Q titan/listings/examplehtm! — ve | W 


| I like [apples] and [ranges] 


| 
| 
| 








M 






































图 8-21 ”用 span 元 素 圈 定 样式 应 用 目标 





8.7.2 ”突出 显示 文本 

















mark 元 素 是 HTML5 中 新 增 的 ， 用 来 表示 因为 与 某 段 上 下 文 相关 而 被 突出 显示 的 一 段 文字 。 
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表 8-24 概 括 了 mark 元 素 。 
表 8-24 ” mark 元 素 
元 素 mark 
元 素 类 型 短语 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 是 
在 HTML5 中 的 变化 无 
习惯 样式 mark { background-color: yellow; color: black; } 





代码 清单 8-24 示 范 了 mark 元 素 的 用 法 。 
代码 清单 8-24 ”使 用 mark 元 素 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
Homophones are words which are pronounced the same, but have different spellings 
and meanings. For example: 
«p» 
I would like a «mark»pair«/mark» of «mark»pears«/mark» 
</p> 
</body> 
</html> 


其 习惯 样式 如 图 8-22 所 示 。 


r 





^ 


olal s 
Example 
€ Œ | Q titan/listings/example.htm wif 


Homophones are words which are pronounced the same, but 
have different spellings and meanings. For example: 


I would like a pair of pears 








图 8-22 ”使 用 mark 元 素 
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8.7.3 ”表示 添加 和 删除 的 内 容 
ins 元 素 和 del 元 素 可 以 分 别 用 来 表示 文档 中 添加 和 删除 的 文字 。 表 8-25 概 括 了 ins 元 素 。 


表 8-25 ” ins 元素 

















































































































元 素 ins 
元 素 类 型 身 为 短语 元 素 的 子 元 素 时 为 短语 元 素 ， 身 为 流 元 素 的 子 元 素 时 为 流 元 素 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 或 流 内 容 的 元 素 
局 部 属性 cite, datetime 
NA 短语 内 容 或 流 内 容 ， 取 决 于 父 元 素 的 类 型 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 E 
在 HTML5 中 的 变化 无 
习惯 样式 ins { text-decoration: underline; } 
表 8-26 概 括 了 del 元 素 。 
表 8-26 del 元 素 
元 素 del 
元 素 类 型 身 为 短语 元 素 的 子 元 素 时 为 短语 元 素 ， 身 为 流 元 素 的 子 元 素 时 为 流 元 素 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 或 流 内 容 的 元 素 
局 部 属性 cite, datetime 
内 容 短语 内 容 或 流 内 容 ， 取 决 于 父 元 素 的 类 型 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 T 
在 HTML5 中 的 变化 无 
习惯 样式 del { text-decoration: line-through; } 











ins 和 del 元 素 定义 了 相同 的 属性 。cite 属 性 用 来 指定 解释 添加 或 删除 相关 文字 原因 的 文档 的 
URL。datetime 属 性 则 用 来 设置 修改 时 间 。 代 码 清单 8-25 示 范 了 ins 和 del 元 素 的 用 法 。 


代码 清单 8-25 ”使 用 del 元 素 和 ins 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
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</head> 
<body> 


Homophones are words which are pronounced the same, but have different spellings 
and meanings. For example: 
<p> 
I would like a <mark>pair</mark> of <mark>pears</mark> 
</p> 
<p> 
<del>I can <mark>sea</mark> the <mark>see</mark></del> 
<ins>I can <mark>see</mark> the <mark>sea</mark></ins> 
</p> 
</body> 
</html> 


这 两 个 元 素 的 习惯 样式 如 图 8-23 所 示 。 

(__ eee 
j By Example \ | 
| € 39 QC |Ọ titan/listing 





s/example yy | M 


Homophones are words which are pronounced 
the same, but have different spellings and 
meanings. For example: | 


I would like a pair of pears 


Lean-seathe-see I can see the sea 



























































wu = = L— = yy 
图 8-23 ”使 用 ins 和 del 元 素 
8.7.4 ”表示 时 间 和 日 其 
time 元 素 可 以 用 来 表示 时 间或 日 期 。 表 8-27 概 括 了 time 元 素 。 
表 8-27 time 元 素 
元 素 time 
元 素 类 型 短语 
允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 datetime 、pubdate 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 是 
在 HTML5 中 的 变化 无 
习惯 样式 无 
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如 果 布 尔 属性 pubdate 存 在 ， 那 么 time 元 素 表 示 的 是 整个 HTML 文档 或 离 该 元 素 最 近 的 
article 元 素 ( 见 第 10 章 ) 的 发 布 日 期 。datetime 属 性 以 RFC3339 规 定 的 格式 (参见 http://tools. 
ietf.org/html/rfc3339 ) 指定 日 期 或 时 间 。 有 了 datetime， 就 能 在 元 素 中 以 便于 阅读 的 形式 设置 日 
期 或 时 间 ， 同 时 又 确保 计算 机 能 无 歧义 地 解析 指定 的 日 期 或 时 间 。 代 码 清单 8-26 示 范 了 time 元 素 
的 用 法 。 

代码 清单 8-26 ”使 用 time 元 素 


<!DOCTYPE HTML> 

















HE 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
</head> 
<body> 
I still remember the best apple I ever tasted. 
I bought it at <time datetime="15:00">3 o'clock</time> 
on <time datetime="1984-12-7">December 7th</time>. 
</body> 
</html> 
8.8 小 结 


本 章 逐 一 介绍 了 用 来 给 内 容 添 加 结构 和 含义 的 文本 元 素 。 它们 有 的 简单 有 的 复杂 。 读者 可 以 
看 出 : HTML5S 既 想 将 含义 和 呈现 方式 分 开 ， 又 想 保持 与 HTML4 的 兼容 ， 两 种 念头 一 直 在 较劲 。 

该 使 用 什么 文本 元 素 要 根据 它们 的 含义 而 不 是 习惯 样式 来 选择 。 如 果 文 档 内 容 标记 得 不 正确 
或 不 一 致 ， 那 么 应 用 到 内 容 上 的 CSS 样 式 可 能 会 出 乎 开发 者 的 预料 ， 用 户 见 到 的 结果 会 很 古怪 。 















































第 9 章 


4. 


组 织 内 容 








本 章 介绍 的 是 用 来 组 织 相 关内 容 的 HTML 元 素 ， 它 们 能 够 给 予 文档 内 容 更 多 的 结构 和 含义 。 
本 章 中 的 元 素 大 多 数 是 流 元 素 ， 只 有 一 个 例外 : a 元 素 。 该 元 素 独特 之 处 在 于 其 所 属 元 素 类 型 取 
决 于 其 包含 的 内 容 。 表 9-1 概 括 了 本 章 内 容 。 


表 9-1 本章 内 容 概要 










































































































































































i 题 解决 方案 代码 清单 

表示 段落 使 用 p 元 素 9-2 
将 全 局 属性 应 用 到 一 片 内 容 上 , 但 不 表示 任 。” 使 用 div 元 素 9-3 
何其 他 内 容 分 组 

保留 HTML 文 档 中 的 布局 使 用 pre 元 素 9-4 
表示 引 自 他 处 的 内 容 使 用 blockquote 元 素 9-5 
表示 段落 级 别 的 主题 转变 使 用 hz 元 素 9-6 
生成 有 序列 表 使 用 ol 元 素 和 1i 元 素 9-7 
生成 无 序列 表 使 用 山 元 素 和 1i 元 素 9-8 
生成 项 目 编号 不 连续 的 有 序列 表 使 用 ol 元 素 和 1i 元 素 ， 并 设置 li 元素 的 value 属 性 9-9 
生成 术语 及 其 定义 的 列表 使 用 dl 、dt 和 dd 元 素 9-10 
生成 带 自 定 义 项 目 编号 的 列表 使 用 已 元 素 ， 并 配合 使 用 CSS 的 :before 选择 器 和 9-11 

counter 特 性 
表示 插图 ( 及 可 有 可 无 的 标题 ) 使 用 figure 元 素 和 figcaption 元 素 9-12 





























9.1 为 什么 要 对 内 容 分 组 

HTML 要 求 浏览 器 将 连 在 一 起 的 几 个 空白 字符 折算 为 一 个 空格 。 一 般 而 言 ,这 种 做 法 是 有 首 
理 的 , 因为 可 以 把 HTML 文 档 的 布局 与 文档 内 容 在 浏览 器 窗口 中 的 布局 分 开 。 代码 清单 9-1 展 示 了 
一 大 段 内 容 ， 这 是 到 目前 为 止 内 容 最 多 的 例子 。 
代码 清单 9-1 HTML 文 档 中 的 大 段 内 容 


<!DOCTYPE HTML> 
<html> 























<head> 

<title>Example</title> 

<meta name="author" content="Adam Freeman"/> 

<meta name="description" content="A simple example"/> 

<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 





I like apples and oranges. 


I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
You can see other fruits I like «a href="fruitlist.html">here</a>. 


«strong»Warning:«/strong» Eating too many oranges can give you heart burn. 
My favorite kind of orange is the mandarin, properly known 


as «i»citrus reticulata</i>. 
Oranges at my local store cost «s»$1 each«/s» $2 for 3. 





The «abbr title-"Florida Department of Citrus"»FDOC«/abbr» regulates the Florida 
citrus industry. 


I still remember the best apple I ever tasted. 9 
I bought it at <time datetime="15:00">3 o'clock</time> 
on <time datetime="1984-12-7">December 7th</time>. 


</body> 
</html> 


此 例 body 元 素 中 的 文字 散布 在 许多 行 上 。 有 些 行 设置 了 缩 进 ， 并 且 在 行 组 之 间 还 有 换行 。 但 
浏览 器 会 忽略 所 有 这 些 结构 ， 将 内 容 全 部 显示 在 一 行 上 ， 如 图 9-1 所 示 。 
í ENS 


Example : 
€ Q | Q titan/listings/example.htm! WoW 























I like apples and oranges. I also like bananas, mangoes, cherries, 
apricots, plums, peaches and grapes. You can see other fruits I like here. 
Warning: Eating too many oranges can give you heart burn. My favorite 
kind of orange is the mandarin, properly known as citrus reticulata. 
Oranges at my local store cost $1-eaeh $2 for 3. The FDOC regulates 
the Florida citrus industry. I still remember the best apple I ever tasted. I 
bought it at 3 o'clock on December 7th. 
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图 9-1 浏览 器 合并 HTML 文档 中 的 连续 空白 字符 

本 章 接 下 来 要 讲 的 这 些 元 素 可 以 用 来 将 相关 内 容 组 织 在 一 起 , 为 文档 建立 结构 。 从 简单 的 段 
落 到 复杂 的 列表 ， 内 容 的 组 织 形式 多 种 多 样 。 
9.2 建立 段落 


Pp 元 素 代表 上 段落。 段落 包含 着 一 个 或 多 个 相关 人 句子， 这 些 句 子 围绕 的 是 一 个 观点 或 论点 。 组 
成 一 个 段落 的 句子 也 可 以 涉及 多 个 论点 ,但 它们 都 有 一 些 共同 的 主题 。 表 9-2 概 括 了 p 元 素 。 
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表 9-2 p 元 素 
元 素 p 
元 素 类 型 流 
允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 


是 否 为 HTML5 新 增 f 











在 HTML5 中 的 变化 align 属 性 在 HTML5 中 已 不 再 使 用 ( HTML4 不 赞成 使 用 这 个 属性 ) 


习惯 样式 p { display: block; margin-before: 1em; 
margin-after: 1em; margin-start: O; 
margin-end: 0; } 























代码 清单 9-2 用 p 元 素 对 前 例 中 的 内 容 进行 了 组 织 。 
代码 清单 9-2 使 用 p 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 


«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 


«body» 
<p>I like apples and oranges. 





I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
You can see other fruits I like «a href-"fruitlist.html"»here«/a».«/p» 


«p»«strong»Warning:«/strong» Eating too many oranges can give you heart burn.«/p» 
«p»My favorite kind of orange is the mandarin, properly known 


as <i>citrus reticulata</i>. 
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p> 





<p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the 
Florida citrus industry.</p> 


<p>I still remember the best apple I ever tasted. 
I bought it at <time datetime="15:00">3 o'clock</time> 


on <time datetime="1984-12-7">December 7th</time>.</p> 
</body> 


</html> 


此 例 在 body 元 素 中 加 入 了 一 些 p 元 素 ,， 把 相关 句子 组 织 在 一 起 ,为 内 容 提供 了 一 些 结构 。p 元 
素 内 部 的 多 个 连续 空白 字符 仍然 会 被 合并 为 一 个 空格 看 ， 如 图 9-2 所 示 。 





9.3 使 用 div 元 素 
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ay Example 
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Q Q titan/listings/example.htm 


I like apples and oranges. I also like bananas, mangoes. cherries, apricots, 
plums, peaches and grapes. You can see other fruits I like here. 


Warning: Eating too many oranges can give you heart burn. 


My favorite kind of orange is the mandarin. properly known as citrus 
reticulata. Oranges at my local store cost $teaek $2 for 3. 


The FDOC regulates the Florida citrus industry. 


I still remember the best apple I ever tasted. I bought it at 3 o'clock on 
December 7th. 


wa 











9.3 使 用 div 元 素 


div 元 素 没有 具体 的 含义 。 找 不 到 其 他 恰当 的 元 素 可 用 时 可 以 使 用 这 个 元 素 为 内 容 建立 结构 


并 赋予 其 含义 。 它 的 含义 是 由 全 局 属性 ( 见 第 3 章 ) 提供 的 ， 通 常用 的 是 class 或 id 属性 。 表 9-3 





概括 了 div 元 素 o 


c= = 
警告 


图 9-2 ”p 元 素 的 效果 

















不 在 万 不 得 已 的 情况 下 最 好 不 要 使 用 div 元 素 , 你 应 该 优先 考虑 那些 具有 语义 重要 性 的 元 


素 。 使 用 jv 元 素 之 前 ， 应 该 先 想 想 HTML5 中 新 增 的 那些 元 素 ， 如 article 和 section (在 


第 10 章 讲解 )。div 本 身 没有 任何 问题 ， 


牢记 语义 问题 。 


元 素 
元 素 类 型 

人 允许 具有 的 父 元 素 
局 部 属性 


























法 
是 否 为 HTML5 新 增 
在 HTML5 中 的 变化 
习惯 样式 











表 9-3 div 元 素 
流 
任何 可 以 包含 流 元 素 的 元 素 
无 
开始 标签 和 结束 标签 


f 














无 。 不 过 在 选择 该 元 素 之 前 应 先 考虑 一 HTML5 


div { display: block; } 





不 过 任何 情况 下 ， 我 们 在 编写 HTMLS 文 档 时 都 要 


新 增 的 article 和 section 等 元 素 
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div 元 素 相当 于 流 元 素 中 的 span。 它 没有 具体 的 含义 ， 因 此 可 以 用 来 在 文档 中 添加 自 定 义 的 
结构 。 建 立 自 定义 结构 的 缺点 在 于 其 含义 只 限于 设计 者 的 网 页 或 Web 应 用 系统 ， 别 人 并 不 了 解 。 
具有 自 定义 结构 的 HTML 文 档 由 第 三 方 处 理 或 设计 样式 时 可 能 会 磁 到 麻烦 。 代 码 清单 9-3 示 范 了 
div 元 素 的 用 法 。 


代码 清单 9-3 ”使 用 div 元 素 


<!DOCTYPE HTML> 

















<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
.favorites ( 
background:grey; 
color:white; 
border: thin solid black; 
padding: 0.2em; 
«/style» 
«/head» 
«body» 
«div class="favorites"> 
<p>I like apples and oranges. 
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
You can see other fruits I like «a href="fruitlist.html">here</a>.</p> 
«p»My favorite kind of orange is the mandarin, properly known 
as «i»citrus reticulata</i>. 
Oranges at my local store cost «s»$1 each«/s» $2 for 3.«/p» 
«/div» 
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.«/p» 
<p>The «abbr title-"Florida Department of Citrus">FDOC</abbr> regulates the 
Florida citrus industry.</p> 
<p>I still remember the best apple I ever tasted. 
I bought it at «time datetime="15:00">3 o'clock«/time» 
on «time datetime-"1984-12-7"»December 7th«/time». «/p» 
«/body» 
</html> 





本 例 中 div 元 素 的 用 法 略 有 不 同 。 它 在 这 里 的 作用 是 将 几 个 不 同类 型 的 元 素 组 织 在 一 起 以 便 
统一 应 用 样式 。 本 来 给 div 元 素 中 的 两 个 p 元 素 设置 一 个 class 属 性 也 能 达到 同样 的 目的 ， 但 本 例 
示范 的 做 法 更 简单 一 点 ， 它 依靠 样式 继承 机 制 〈 见 第 4 章 ) 发 挥 作用 。 











94 使 用 预先 编排 好 格式 的 内 容 





9.4 使 用 预先 编排 好 格式 的 内 容 


pre 元 素 可 以 改变 浏览 器 处 理 内 容 的 方式 ， 阻 止 合并 空白 字符 ， 让 源 文档 中 的 格式 得 以 保留 。 
这 在 文档 中 有 一 部 分 内 容 的 原始 格式 意义 重大 时 可 以 排 上 用 场 。 除 此 之 外 最 好 不 要 使 用 这 个 元 
素 ， 这 是 因为 它 削弱 了 通过 使 用 元 素 和 样式 来 控制 呈现 结果 这 一 机 制 的 灵活 性 。 表 9-4 概 括 了 pre 





















































元 素 。 
表 9-4 ”pre 元 素 
元 素 pre 
元 素 类 型 流 
允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 
局 部 属性 无 
内 容 短语 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 E 
在 HTML5 中 的 变化 无 
习惯 样式 pre ( display: block; font-family: monospace; 





white-space: pre; margin: 1em 0; } 











pre 元 素 跟 code 元 素 搭配 在 一 起 的 时 候 尤 其 有 用 。 编 程 语 言 中 的 格式 通常 都 很 重要 ， 不 宜 用 


























元 素 重新 编排 其 格式 。 代 码 清 单 9-4 示 范 了 pre 元 素 的 用 法 。 
代码 清单 9-4 ”使 用 pre 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
.favorites { 
background:grey; 
color:white; 
border: thin solid black; 
padding: 0.2em; 





</style> 
</head> 
<body> 


<pre><code> 
var fruits = ["apples", "oranges", "mangoes", "cherries"]; 
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for (var i = 0; i < fruits.length; i++) { 
document .writeln("I like " + fruits[i]); 

} 
</code></pre> 
<div class="favorites"> 
<p>I like apples and oranges. 
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
You can see other fruits I like <a href-"fruitlist.html"»here«/a».«/p» 
<p>My favorite kind of orange is the mandarin, properly known 

as <i>citrus reticulata</i>. 

Oranges at my local store cost <s>$1 each</s> $2 for 3.</p> 
</div> 

</body> 

</html> 


代码 清单 9-4 中 用 pre 元 素 标记 了 一 段 JavaScript 代 码 。 由 于 并 非 位 于 一 个 script 元 素 中 ， 所 以 
这 段 代 码 不 会 被 执行 ， 但 是 其 格式 会 得 到 保留 。 浏 览 器 不 会 重新 编排 pre 元 素 中 的 内 容 的 格式 ， 


所 以 每 一 行 








开头 的 那些 空格 或 制 表 符 都 会 显示 在 浏览 器 窗口 中 。 正 是 因为 这 个 原因 ，pre 元 素 中 


的 各 条 程序 语句 都 没有 与 HTML 文 档 保 持 一 致 的 缩 进 结 构 。 这 些 已 设置 好 格式 的 内 容 在 浏览 器 中 
的 显示 结果 如 图 9-3 所 示 。 
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var fruits = ["apples", "oranges", "mangoes", "cherries"]; 
for (var i = 0; i < fruits.length: i++) ( 

document.writeln("I like " + fruits[i]):; E 
) 


I ike apples and oranges. I also like bananas, mangoes, cherries, apricots, plums, peaches 


and grapes. You can see other fruits I like 




















9-3 ”显示 用 pre 元 素 标 记 的 已 设置 好 格式 的 内 容 





9.5 引用 他 处 内 容 


blockquote 元 素 表示 引 自 他 处 的 一 片 内 容 。 该 元 素 的 用 途 与 第 8 章 介 绍 的 q 元 素 类 似 ,但 是 通 
常用 在 要 引用 的 内 容 更 多 的 情况 下 。 表 9-5 概 括 了 bjlockquote 元 素 。 
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#29-5 blockquote t% 





























元 素 blockquote 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 

局 部 属性 cite 

内 容 流 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 否 

在 HTML5 中 的 变化 无 

习惯 样式 blockquote { display: block; margin-before: 1em; 


margin-after: 1em; margin-start: 40px; 
margin-end: 40px; } 











该 元 素 的 cite 属 性 可 以 用 来 指定 所 引用 的 内 容 的 来 源 ， 如 代码 清单 9-5 所 示 。 
代码 清单 9-5 使 用 blockquote 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 





<p>I like apples and oranges. 


I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
You can see other fruits I like «a href-"fruitlist.html"»here«/a».«/p» 


«p»My favorite kind of orange is the mandarin, properly known 
as «i»citrus reticulata</i>. 
Oranges at my local store cost «s»$1 each«/s» $2 for 3.«/p» 


«blockquote cite-"http://en.wikipedia.org/wiki/Apple"» 

The apple forms a tree that is small and deciduous, reaching 3 to 12 metres 
(9.8 to 39 ft) tall, with a broad, often densely twiggy crown. 

The leaves are alternately arranged simple ovals 5 to 12 cm long and 3-6 
centimetres (1.2-2.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole 
with anacute tip, serrated margin and a slightly downy underside. Blossoms are 
produced in spring simultaneously with the budding of the leaves. 

The flowers are white with a pink tinge that gradually fades, five petaled, 
and 2.5 to 3.5 centimetres (0.98 to 1.4 in) in diameter. 

The fruit matures in autumn, and is typically 5 to 9 centimetres ( 

2.0 to 3.5 in) in diameter. 

The center of the fruit contains five carpels arranged in a five-point star, 





each carpel containing one to three seeds, called pips.</blockquote> 
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p> 


<p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the 
Florida citrus industry.</p> 


<p>I still remember the best apple I ever tasted. 
I bought it at <time datetime="15:00">3 o'clock</time> 
on <time datetime="1984-12-7">December 7th</time>. </p> 
</body> 
</html> 


其 习惯 样式 如 图 9-4 所 示 。 
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| I like apples and oranges. I also like bananas, mangoes. cherries, apricots, plums, peaches and 
| grapes. You can see other fruits I like here. 
| 


My favorite kind of orange is the mandarin, properly known as citrus reticulata. Oranges at my 
local store cost $1-eaeh $2 for 3. 


The apple forms a tree that is small and deciduous, reaching 3 to 12 metres (9.8 to 
39 ft) tall, with a broad, often densely twiggy crown. The leaves are alternately 
arranged simple ovals 5 to 12 cm long and 3-6 centimetres (1.2-2.4 in) broad on a 
2 to 5 centimetres (0.79 to 2.0 in) petiole with anacute tip, serrated margin and a 
slightly downy underside. Blossoms are produced in spring simultaneously with the 
budding of the leaves. The flowers are white with a pink tinge that gradually fades, 
five petaled, and 2.5 to 3.5 centimetres (0.98 to 1.4 in) in diameter. The fruit 
matures in autumn, and is typically 5 to 9 centimetres ( 2.0 to 3.5 in) in diameter. 
The center of the fruit contains five carpels arranged in a five-point star, each carpel 一 | 
containing one to three seeds, called pips. 


m 











Warning: Eating too many oranges can give you heart burn. 

















图 9-4 使 用 blockquote 元 素 


提示 从 图 9-4 可 以 看 到 ， 浏 览 器 会 忽略 blockquote 元 素 中 的 内 容 的 格式 。 要 在 引用 的 内 容 中 建 
立 结构 ， 可 以 使 用 其 他 一 些 组 织 元 素 ， 如 p 或 hr ( 见 随后 的 例子 )。 


9.6 ”添加 主题 分 隔 


hr 元 素 代 表 上 段落 级 别 的 主题 分 隔 ( paragraph-level thematic break )， 这 又 是 一 个 在 语义 和 呈现 
分 离 要 求 驱 使 下 冒 出 来 的 奇特 术语 。 在 HTML4 中 ，hr 元 素 代表 一 条 水 平 线 (其实 就 是 一 条 横贯 
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页 面 的 直线 )。 在 HTML5 中 ,hz 元 素 代表 着 向 另 一 个 相关 主题 的 转换 , 它 在 HTML5 中 的 习惯 样式 
是 一 条 横贯 页 面 的 直线 。 表 9-6 概 括 了 hr 元 素 。 


表 9-6 hr 元 素 















































元 素 hr 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 

局 部 属性 无 

内 容 无 

标签 用 法 虚 元 素 

是 否 为 HTML5 新 增 ff 

在 HTML5 中 的 变化 在 HTML4 中 hr 元 素 只 有 呈现 性 质 的 含义 。 在 HTML5 中 ， 其 语义 如 前 所 述 。 其 呈现 性 的 一 



























































面 已 被 降格 为 习惯 样式 。 此 外 ，align、width、noshade 、size、color 属 性 在 HTML5 中 已 不 
使 用 
习惯 样式 hr { display: block; margin-before: 0.5em; 








margin-after: 0.5em; margin-start: auto; 
margin-end: auto; border-style: inset; 
border-width: 1px; } 








HTML5 规 范 在 如 何 才 算 hz 元 素 的 有 效用 法 方面 语 需 不 详 。 不 过 它 举 了 两 个 例子 ， 一 个 是 
故事 中 地 点 的 改变 ， 个 是 工具 书 某 一 部 分 中 主题 的 改变 。 代 码 清 单 9-6 示 范 了 hr 元 素 的 
用 法 。 
代码 清单 9-6 使 用 hr 元 素 


<!DOCTYPE HTML> 




















<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«/head» 
«body» 


<p>I like apples and oranges. 


I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
You can see other fruits I like «a href-"fruitlist.html"»here«/a».«/p» 


«p»My favorite kind of orange is the mandarin, properly known 
as «i»citrus reticulata</i>. 
Oranges at my local store cost «s»$1 each«/s» $2 for 3.«/p» 


«blockquote cite="http://en.wikipedia.org/wiki/Apple"> 
The apple forms a tree that is small and deciduous, reaching 3 to 12 metres 





(9.8 to 39 ft) tall, with a broad, often densely twiggy crown. 

<hr> 

The leaves are alternately arranged simple ovals 5 to 12 cm long and 3-6 
centimetres (1.2-2.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole 
with anacute tip, serrated margin and a slightly downy underside. Blossoms are 
produced in spring simultaneously with the budding of the leaves. 

<hr> 

The flowers are white with a pink tinge that gradually fades, five petaled, 
and 2.5 to 3.5 centimetres (0.98 to 1.4 in) in diameter. 

The fruit matures in autumn, and is typically 5 to 9 centimetres ( 

2.0 to 3.5 in) in diameter. 

<hr> 

The center of the fruit contains five carpels arranged in a five-point star, 
each carpel containing one to three seeds, called pips.</blockquote> 


<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.«/p» 


<p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the 
Florida citrus industry.</p> 


<p>I still remember the best apple I ever tasted. 
I bought it at <time datetime="15:00">3 o'clock</time> 
on <time datetime="1984-12-7">December 7th</time>. </p> 
</body> 
</html> 


此 例 在 blockquote 元 素 中 加 入 了 一 些 hr 元 素 ， 形 成 一 定 的 结构 。 这 个 改变 对 HTML 文 档 呈 现 
结果 的 影响 如 图 9-5 所 示 。 
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local store cost $i-eaeh $2 for 3. 


| 
| The apple forms a tree that is small and deciduous, reaching 3 to 12 metres (9.8 to 


39 ft) tall, with a broad, often densely twiggy crown. 


The leaves are alternately arranged simple ovals 5 to 12 cm long and 3—6 
centimetres (1.2-2.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole with 
anacute tip, serrated margin and a slightly downy underside. Blossoms are produced 
in spring simultaneously with the budding of the leaves. 





"m 


The flowers are white with a pink tinge that gradually fades, five petaled, and 2.5 to 
3.5 centimetres (0.98 to 1.4 in) in diameter. The fruit matures in autumn, and is 
typically 5 to 9 centimetres ( 2.0 to 3.5 in) in diameter. 


The center of the fruit contains five carpels arranged in a five-point star, each carpel 
containing one to three seeds, called pips. L3 








Warning: Eating too many oranges can give you heart burn. 
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图 9- 








在 blockquote 元 素 中 加 入 hr 元 素 
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9.7 将 内 容 组 织 为 列表 


HIML 定 义 了 几 个 用 来 生成 内 容 项 目 列表 的 元 素 。 列 表 的 类 型 有 有 序列 表 、 无 序列 表 和 说 明 


列表 ， 详 见 后 述 。 


9.7.1 ol 元 素 


01 元 素 表 示 有 序列 表 。 列 表 项 目 用 1i 元 素 表示 ( 随后 会 有 介绍 )。 表 9-7 概 括 了 01 元 素 。 





表 9-7 ol 元 素 












































用 的 start 和 type 属 性 在 HTML5 中 恢复 ， 





















































元 素 ef 
元 素 类 型 流 
允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 
局 部 属性 start 、reversed、type 
内 容 零 个 或 多 个 1i 元 素 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 f 
在 HTML5 中 的 变化 reversed 属 性 是 HTML5 中 新 增 的 。HTML4 不 赞成 使 
但 却 有 了 语义 方面 的 〈 而 不 是 呈现 方面 的 ) 含义 。compact 属 性 不 再 使 用 
习惯 样式 ol { display: block; list-style-type: decimal; 





margin-before: 1em; margin-after: 1em; 
margin-start: 0; margin-end: 0; 
padding-start: 40px; } 


代码 清单 9-7 所 示 为 用 ol 元素 生成 的 一 个 简单 的 有 序列 表 。 
代码 清单 9-7 用 ol 元 素 生 成 一 个 简单 的 列表 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" 
«/head» 
«body» 


I like apples and oranges. 


I also like: 

«ol» 
«li»bananas«/li» 
«li»mangoes«/li» 














/> 





<li>cherries</li> 
<li>plums</1li> 
«li»peaches«/li» 
«li»grapes«/li» 


«/ol» 


You can see other fruits I like «a href="fruitlist.html">here</a>. 


</body> 
</html> 


这 个 列表 在 浏览 器 中 


的 显示 结果 见 图 9-6。 
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| I like apples and oranges. I also like: 


You can see other fruits I like here. 
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的 有 序列 表 





图 9-6 


一 个 简 





列表 项 目 可 以 通过 ol 元 素 定义 的 属性 加 以 控制 。start 属 性 设 定 的 是 列表 首 项 的 编号 值 。 





如 果 不 用 这 个 


属性 ,那么 首 项 的 编号 为 1。type 














属性 用 来 设 定 显示 在 各 列表 项 旁 的 编号 的 类 型 。 




















表 9-8 罗 列 了 该 属性 支持 的 值 。 








表 9-8 ol 元 素 的 type 属 性 支持 的 值 

值 说 明 TR 例 

1 十 进 制 数 ( 默认 ) 1 

a 小 写 拉丁 字母 a. be c. d. 

A 大 写 拉丁 字母 A., B., C., D. 
i 小 写 罗马 数字 i. di. iii., iv. 
I 大 写 罗马 数字 L, IL, IIL, IV. 

如 果 使 用 了 reversed 属 性 ， 那 么 列表 编号 采用 降序 。 不 过 在 撰写 本 书 时 ， 主 流 浏览 器 均 不 支 








持 reversed 属 性 。 
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972 ul 元素 


ul 元 素 表示 无 序列 表 。 与 ol 元 素 一 样 ，ul 元 素 中 的 列表 项 用 1i 元 素 ( 后 文 将 有 介绍 ) 表示 。 
表 9-9 概 括 了 ul 元 素 。 





表 9-9 ”ul 元 素 






























































元 素 ul 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 

局 部 属性 无 

内 容 零 个 或 多 个 1i 元 素 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 否 

在 HTML5 中 的 变化 type 和 compact 属 性 已 不 再 使 用 

习惯 样式 ul { display: block; list-style-type: disc; 








margin-before: iem; margin-after: 1em; 





margin-start: 0; margin-end: 0; 
padding-start: 40px; ] 


ul 元 素 包 含 着 一 批 1i 元 素 ， 该 元 素 没有 定义 任何 局 部 属性 ， 其 呈现 形式 由 CSS 控 制 。 代 码 清 
单 9-8 示 范 了 ul 元 素 的 用 法 。 


代码 清单 9-8 ”使 用 ul 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«/head» 
«body» 





I like apples and oranges. 


I also like: 

«ul» 
«li»bananas«/li» 
<li>mangoes</1i> 
«li»cherries«/li» 
«li»plums«/li» 
«li»peaches«/li» 
<li>grapes</li> 

</ul> 


You can see other fruits I like <a href="fruitlist.html">here</a>. 





</body> 
</html> 


无 序列 表 的 每 个 项 目前 都 会 显示 一 个 项 目 符号 。 这 个 符号 的 样式 可 以 用 CSS 属 性 
list-style-type( 见 第 24 章 ) 控制 。 其 习惯 样式 〈 对 应 于 disc 值 ) 如 图 9-7 所 示 。 
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I like apples and oranges. I also like: 


bananas 
mangoes 
cherries 
plums 
peaches 
grapes 
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You can see other fruits I like here. 
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图 9-7 ”ul 元 素 的 习惯 样式 











97.3 1i 元 素 


1i 元 素 表示 列表 中 的 项 目 。 它 可 以 与 ul 、ol 和 menu 元 素 C 目前 还 没有 主流 浏览 器 支持 menu 元 
素 ) 搭配 使 用 。 表 9-10 概 括 了 1i 元 素 。 





表 9-10 1i 元 素 

































































元 素 li 

元 素 类 型 无 

允许 具有 的 父 元 素 ul, ol, menu 

局 部 属性 value ( 仅 用 于 父 元 素 为 ol 元 素 时 ) 

NE 流 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 否 

在 HTML5 中 的 变化 HTML4 不 赞成 使 用 的 value 属 性 在 HTML5 中 得 以 恢复 
习惯 样式 li ( display: list-item; } 





1i 元 素 非 常 简单 ， 它 表示 父 元 素 中 的 一 个 列表 项 。 其 value 属 性 可 以 用 来 生成 不 连续 的 有 序 
列表 。 如 代码 清单 9-9 所 示 。 


代码 清单 9-9 生成 不 连续 的 有 序列 表 


<!DOCTYPE HTML> 
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<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 


I like apples and oranges. 


I also like: 

«ol» 
«li»bananas«/li» 
«li value="4">mangoes</1i> 
«li»cherries«/li» 
«li value="7">plums</1i> 
<li>peaches</1i> 
<li>grapes</li> 

</ol> 


You can see other fruits I like <a href="fruitlist.html">here</a>. 


</body> cam 


«/html» 
浏览 器 遇 到 带 value 属 性 的 i 元 素 时 , 会 把 列表 项 计数 器 调 为 该 属性 的 值 , 其 效果 如 图 9-8 所 示 。 
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| I like apples and oranges. I also like: 


bananas 
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cherries 

plums 


" 


. peaches 
grapes 


Donub 





You can see other fruits I like here. E 




















图 9-8 生成 不 连续 的 有 序列 表 








9.7.4 生成 说 明 列 表 


说 明 列 表 包 含 着 一 系列 术语 /说 明 组 合 (也 即 一 系列 附带 定义 的 术语 )。 定义 说 明 列 表 要 用 到 
三 个 元 素 : dl 、dt 和 dd 元 素 。 这 些 元 素 没有 定义 局 部 属性 ， 在 HTML5 中 也 没有 什么 变化 。 表 9-11 
概括 了 这 些 元 素 。 

















表 9-11 ”说明 列表 中 的 元 素 





元 OR 说 明 习惯 样式 
dl 表示 说 明 列 表 dl { display: block; 


margin-before: 1em; 
margin-after: 1em; 
margin-start: 0; 
margin-end: 0; } 


dt 表示 说 明 列 表 中 的 术语 dt { display: block; } 
dd 表示 说 明 列表 中 的 定义 aqt display: Block; 





margin-start: 40px; } 





代码 清单 9-10 示 范 了 这 些 元 素 的 用 法 。 注 意 一 个 dt 元 素 可 以 搭配 多 个 dd 元 素 ， 这 样 就 能 为 一 





个 术语 提供 多 个 定义 。 


代码 清单 9-10 ”生成 说 明 列 表 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 


I like apples and oranges. 
I also like: 


«dl» 
<dt>Apple</dt> 
<dd>The apple is the pomaceous fruit of the apple tree</dd> 
<dd><i>Malus domestica</i></dd> 
<dt>Banana</dt> 
<dd>The banana is the parthenocarpic fruit of the banana tree</dd> 
<dd><i>Musa acuminata</i></dd> 
<dt>Cherry</dt> 
<dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd> 
«/dl» 


You can see other fruits I like «a href="fruitlist.html">here</a>. 
«/body» 
«/html» 


9.7.5 ”生成 自 定义 列表 
HTML 对 列表 的 支持 不 像 看 上 去 那么 简单 ， 实 际 上 要 灵活 得 多 。 结 合 CSS 中 的 counter 特 性 
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和 :before 选 择 器 , 可 以 用 由 元 素 生 成 复杂 的 列表 。counter 特 性 和 :before 选 择 器 将 在 第 17 章 介绍 。 
本 章 不 打算 过 多 涉及 CSS， 所 以 未 对 下 面 的 范例 详 加 讲解 ， 读 者 读 过 本 书后 面 介绍 CSS 的 各 章 之 
后 或 者 在 迫切 需要 学 习 列 表 的 高 级 用 法 时 可 以 再 回头 温习 一 下 。 代 码 清单 9-11 中 的 列表 中 能 套 了 
两 个 子 列表 ， 这 三 个 列表 的 序号 均 使 用 自 定 义 值 。 


代码 清单 9-11 带 自 定义 计数 器 的 骨 套 列表 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 











«style» 
body ( 
counter-reset: OuterItemCount 5 InnerItemCount; 
} 


Houterlist > li:before { 
content: counter(OuterItemCount) ". "; 
counter-increment: OuterItemCount 2; 





) 


ul.innerlist > li:before { 
content: counter(InnerItemCount, lower-alpha) ". "; 
counter-increment: InnerItemCount; 
} 
</style> 
</head> 
<body> 


I like apples and oranges. 
I also like: 


«ul id-"outerlist" style-"list-style-type: none"> 
«li»bananas«/li» 
«li»mangoes, including: «/li» 

«ul class="innerlist"> 
«li»Haden mangoes«/li» 
«li»Keitt mangoes«/li» 
<li>Kent mangoes«/li» 

«/ul» 

<li>cherries</li> 
«li»plums, including: 

«ul class="innerlist"> 
«li»Elephant Heart plums«/li» 
<li>Stanley plums«/li» 
<li>Seneca plums«/li» 

«/ul» 

</li> 





«li»peaches«/li» 
<li>grapes</li> 
</ul> 


You can see other fruits I like <a href="fruitlist.html">here</a>. 
</body> 
</html> 


这 些 列表 在 浏览 需 中 的 显示 结果 如 图 9-9 所 示 。 








[ um T Eram) 
Example WE 
€ Œ | Q titan/listings/example.html Y | 


| 
| Ilike apples and oranges. I also like: 


7. bananas 
9. mangoes, including: 
o a. Haden mangoes 
9 b. Keitt mangoes 
© c. Kent mangoes 
11. cherries 
13. plums, including 
© d. Elephant Heart plums 
9 e. Stanley plums 
© f Seneca plums 
15. peaches 
17. grapes 


You can see other fruits I like here. 

















图 9-9 使 用 了 CSS 特 性 的 自 定 义 列表 





例 中 有 些 地 方 需要 说 明 一 下 。 这 个 HTML 文 档 中 的 列表 都 是 用 ul 元 素 生 成 的 无 序列 表 ， 因 此 
才 可 以 禁用 标准 的 项 目 符号 (使 用 1ist-style-type 属 性 ) 并 依靠 用 :before 选 择 器 生成 的 内 容 。 

注意 ， 外 层 列表 的 编号 始 于 7， 以 2 的 步 长 迭 增 。 用 标准 的 ol 元 素 无 法 做 到 这 一 点 。CSS 的 
counter 特 性 用 起 来 有 点 别扭 ， 但 非常 灵活 。 

最 后 要 说 的 是 ， 示 例 中 的 内 层 列 表 ( 各 种 芒果 和 李子 ) 的 编号 是 连续 的 。 用 1i 元 素 的 value 
属性 或 ol 元 素 的 start 属 性 也 能 实现 同样 的 效果 , 但 是 这 两 种 方法 都 需要 事先 知道 列表 项 的 数目 ， 
这 个 条 件 在 Web 应 用 系统 中 未 必 总 能 满足 。 


9.8 使 用 插图 


最 后 要 讲 的 组 织 元 素 与 插图 有 关 。HTML5 是 这 样 定义 插图 (figure ) 的 :“ 一 个 独立 的 内 容 
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单元 , 可 带 标题 。 通 常 作为 一 个 整体 被 文档 的 主体 引用 ,把 它 从 文档 主体 中 删除 也 不 会 影响 文档 
的 意思 。” 这 个 定义 相当 笼统 , 外 延 不 限于 传统 意义 上 的 插图 一 一 某 种 图 表 或 图 示 。 插图 用 figure 
元 素 定义 ， 对 它 的 概括 见 表 9-12。 














表 9-12 figure 元 素 





























元 素 figure 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 

局 部 属性 无 

内 容 流 内 容 ， 还 可 包含 一 个 figcaption 元 素 
标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 figure { display: block; margin-before: 1em; 


margin-after: 1em; margin-start: 40px; 
margin-end: 40px; } 





figure 元 素 可 以 包含 一 个 figcaption 元 素 ， 后 者 表示 插图 的 标题 。 表 9-13 概 括 了 figcaption 
元 素 。 





表 9-13 figcaption 元 素 


























元 素 figcaption 

元 素 类 型 $ 

允许 具有 的 父 元 素 figure 

局 部 属性 无 

iio 流 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 figcaption { display: block; } 








代码 清单 9-12 同 时 使 用 了 figure 和 figcaption 元 素 。 


代码 清单 9-12 ”使 用 figure 和 figcaption 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 





<meta name="description" content="A simple example"/> 

<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 


I like apples and oranges. 


«figure» 
<figcaption>Listing 23. Using the code element«/figcaption» 
«code»var fruits - ["apples", "oranges", "mangoes", "cherries"];«br» 
document.writeln("I like " + fruits.length + " fruits"); 
«/code» 
«/figure» 


You can see other fruits I like «a href="fruitlist.html">here</a>. 
</body> 
</html> 


LEP figuresc AE MT — Mt code TR RER PAA, WA figcaption WAYS T 
一 个 标题 。 注 意 ，figcaption 元 素 必 须 是 figure 元 素 的 第 一 个 或 最 后 一 个 子 元 素 。 这 些 元 素 的 习 
惯 样式 如 图 9-10 所 示 。 
| So 
i E Example uag La 
| € Q | Q titan/listings/example.html dv X | 


























I like apples and oranges. 


Listing 23. Using the code element 
var fruits = ["apples", "oranges", "mangoes", "cherries"]; 
document.writeln("I like " + fruits.length + " fruits"); 


You can see other fruits I like here. 























19-10 ”使 用 figure 和 figcaption 元 素 


9.9 小 结 


本 章 介绍 的 HTML 元 素 可 以 用 来 将 相关 内 容 组 织 在 一 起 ， 如 段落 、 引 自 他 处 的 大 段 引 文 、 相 
关 项 目 列表 等 。 它们 妙用 无 穷 ,而且 简便 易 用 一 一 唯一 的 例外 是 某 些 复 杂 的 列表 选项 需要 一 些 练 
习 才 能 运用 纯熟 。 
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本 章 将 要 介绍 用 来 表示 内 容 的 不 同 部 分 的 元 素 , 说 明 如 何 划 分 内 容 以 便 将 各 个 主题 和 概念 分 
隔 开 来 。 这 些 元 素 大 都 是 新 增 的 ,它们 构成 了 语义 和 呈现 分 离 实践 的 重要 基础 。 然 而 这 也 意味 着 
这 些 元 素 有 点 难以 演示 ,因为 它们 在 外 观 上 对 内 容 的 影响 微乎其微 , 甚至 根本 没有 影响 。 为 此 本 
章 在 许多 例子 中 为 这 些 元 素 应 用 了 一 些 CSS 样 式 ， 以 强调 其 结构 和 带 来 的 变化 。 

本 章 不 会 对 用 到 的 CSS 样 式 进行 解释 。 第 4 章 已 对 CSS 的 关键 特性 做 了 简要 介绍 。 至 于 各 个 
CSS 属 性 ， 且 留 到 从 第 16 章 开始 的 几 章 中 介绍 。 表 10-1 概 括 了 本 章 内 容 。 


表 10-1 ”本章 内 容 概要 
































































































































B 题 解决 方案 代码 清单 

表示 标题 使 用 元 素 h1~h3 10-1 
表示 一 组 标题 ， 其 中 只 有 第 一 个 可 出 现在 文档 大 纲 中 使 用 hgroup 元 素 10-2, 10-3 
表示 一 个 重要 的 主题 或 概念 使 用 section 元 素 10-4 

表示 首部 和 尾部 使 用 header 和 footer 元 素 10-5 

表示 导航 元 素 集合 使 用 nav 元 素 10-6 

表示 可 独立 发 布 的 重要 主题 或 概念 使 用 article 元 素 10-7 

表示 周边 内 容 的 一 些 沾边 话题 使 用 aside 元 素 10-8 

表示 文档 或 文章 的 联系 信息 使 用 address 元 素 10-9 
生成 一 个 区 域 ， 用 户 可 将 其 展开 以 了 解 更 多 细节 使 用 details 和 summary 元 素 10-10 








10.1 添加 基本 的 标题 


h1 元 素 表示 标题 。HTML 定 义 了 一 套 标题 元 素 体系 ， 从 h1 一 直到 h6，h1 级 别 最 高 。 表 10-2 概 
括 了 这 些 元 素 。 








表 10-2 ”ht 一 h6 标 题 元 素 
元 素 hd ~ h6 
元 素 类 型 流 
允许 具有 的 父 元 素 hgroup 元 素 或 其 他 任何 可 以 包含 流 元 素 的 元 素 。 这 些 元 素 不 能 是 address 元 素 的 后 代 元 素 

































































(EE) 
局 部 属性 无 
内 容 流 内 容 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 fü 
在 HTML5 中 的 变化 无 
习惯 样式 参见 表 10-3 














同 级 标题 通常 用 来 将 内 容 分 作 几 个 部 分 , 每 个 部 分 一 个 主题 。 而 各 级 标题 则 通常 用 来 表示 同 
一 主题 的 各 个 方面 。 这 些 元 素 还 有 一 个 额外 的 好 处 是 它们 构成 了 文档 的 大 纲 ， 因 此 用 户 只 要 随便 
浏览 一 下 文档 的 各 级 标题 即 可 初步 了 解 其 大 意 和 结构 , 他 们 通过 标题 体系 还 能 迅速 导航 到 感 兴 
的 内 容 。 代 码 清单 10-1 示 范 了 从 ha 到 h3 的 标题 元 素 的 用 法 。 


代码 清单 10-1 使 用 元 素 h1 、h2 和 ha 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«hi»Fruits I like</h1> 
I like apples and oranges. 
«h2»Additional fruits«/h2» 
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
«h3»More information«/h3» 
You can see other fruits I like «a href="fruitlist.html">here</a>. 
































<hi>Activities I like</h1> 
<p>I like to swim, cycle and run. I am in training for my first triathlon, 
but it is hard work.</p> 
<h2>Kinds of Triathlon</h2> 
There are different kinds of triathlon - sprint, Olympic and so on. 
<h3>The kind of triathlon I am aiming for</h3> 
I am aiming for Olympic, which consists of the following: 
<ol> 
«li»i.5km swim«/li» 
«li»40km cycle«/li» 
<li>10km run«/li» 
«/ol» 
«/body» 
</html> 


此 例 只 使 用 了 hi、h2 和 h3 这 三 级 标题 , 这 是 因为 除了 合同 和 技术 规范 这 类 高 度 技术 性 和 精确 
的 文档 外 , 很 少 有 什么 内 容 有 必要 用 到 更 深层 次 的 标题 。 大 多 数 内 容 最 多 只 需要 用 到 两 级 或 三 级 
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标题 。 例 如 ， 我 在 Apress 出 版 的 书 都 只 使 用 三 级 标题 。 尽 管 Apress 的 模板 定义 了 五 级 标题 ， 但 是 
如 果 我 用 到 了 第 四 、 五 级 标题 的 话 文字 编辑 会 觉得 不 舒服 。 

这 个 代码 清单 中 的 h1、h2 和 h3 元 素 在 浏览 器 中 的 显示 结果 如 图 10-1 所 示 。 
( —— HEN ESI 
BY Sample Les l = 
€ Œ | O titan/listings/example.htm vw A 











| Fruits I like 


I like apples and oranges. 


Additional fruits 


n. 


I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
More information 


You can see other fruits I like here. 





Activities I like d 


I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work. 





Kinds of Triathlon 














_There are different kinds of triathlon - sprint, Olympic and so on. - = 














图 10-1 用 习惯 样式 显示 元 素 h1、h2 和 h3 
从 图 中 可 以 看 到 ， 各 级 标题 都 有 其 不 同 的 习惯 样式 。 表 10-3 展 示 了 各 级 标题 的 习惯 样式 。 
表 10-3 ”从 h1 到 h6 的 各 级 标题 的 习惯 样式 























元 # 习惯 样式 

h1 hi ( display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em; 
margin-start: 0; margin-end: 0; font-weight: bold; } 

h2 h2 ( display: block; font-size: 1.5em; margin-before: 0.83em; margin-after: 0.83em; 
margin-start: 0; margin-end: 0; font-weight: bold; 

h3 h3 ( display: block; font-size: 1.17em; margin-before: 1em; margin-after: 1em; 
margin-start: 0; margin-end: 0; font-weight: bold; 

h4 h4 ( display: block; margin-before: 1.33em; margin-after: 1.33em; margin-start: 0; 
margin-end: 0; font-weight: bold; } 

h5 h5 { display: block; font-size: .83em; margin-before: 1.67em; margin-after: 1.67em; 
margin-start: 0; margin-end: 0; font-weight: bold; 

h6 h6 { display: block; font-size: .67em; margin-before: 2.33em; margin-after: 2.33em; 
margin-start: 0; margin-end: 0; font-weight: bold; 
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作者 可 以 不 按 h1 到 n6 这 个 级 别 顺序 使 用 标题 元 素 , 但 是 这 样 做 会 引起 用 户 的 误解 。 层 次 化 的 
标题 应 用 得 如 此 普遍 ， 以 至 于 用 户 对 其 用 法 都 有 了 国定 的 看 法 。 


10.2 ”隐藏 子 标题 
hgroup 元 素 可 以 用 来 将 几 个 标题 元 素 作为 一 个 整体 处 理 , 以 免 抄 乱 HTML 文档 的 大 纲 。 表 10-4 









































概括 了 hgroup 元 素 。 
表 10-4 ”hgroup 元 素 
元 素 hgroup 
元 素 类 型 流 
允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 
局 部 属性 无 
内 容 一 个 或 多 个 标题 元 素 (hi1~h6 ) 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 是 
在 HTML5 中 的 变化 A 





习惯 样式 


hgroup { display: block; } 


hgroup 主 要 用 来 解决 子 标题 的 问题 。 假 设 文档 中 有 一 段 内 容 ， 其 标题 为 “Fruits I Like", i& 


有 一 个 子 标题 


“How I Learned to Love Citrus”。 为 此 需要 用 到 hi1 和 h2 元 素 。 如 代码 清单 10-2 所 示 。 





代码 清单 10-2 ”用 hi 和 h2 元 素 生 成 带子 标题 的 标题 


<!DOCTYPE HTML> 


<html> 


<head> 


<title>Example</title> 

<meta name="author" content="Adam Freeman"/> 

«meta name-"description" content-"A simple example"/» 

«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«/head» 


«body» 


<hi>Fruits I Like</h1> 

<h2>How I Learned to Love Citrus</h2> 

I like apples and oranges. 

<h2>Additional fruits</h2> 

I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
<h3>More information</h3> 

You can see other fruits I like <a href="fruitlist.html">here</a>. 


«hi»Activities I Like</h1> 

<p>I like to swim, cycle and run. I am in training for my first triathlon, 
but it is hard work.«/p» 

«h2»Kinds of Triathlon«/h2» 

There are different kinds of triathlon - sprint, Olympic and so on. 
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<h3>The kind of triathlon I am aiming for</h3> 
I am aiming for Olympic, which consists of the following: 
<ol> 
«li»1.5km swim«/li» 
«li»40km cycle«/li» 
«li»10km runc/li» 
«/ol» 
«/body» 
«/html» 


这 里 遇 到 的 问题 是 无 法 区 分 表示 子 标 题 的 n2 元 素 和 表示 下 一 级 标题 的 n2 元 素 。 如 果 写 个 脚本 
程序 把 文档 中 从 h1 到 n6 的 各 级 标题 梳理 出 来 做 成 一 个 大 纲 ， 得 到 的 将 是 这 样 一 个 失真 的 结 


Fruits I Like 
How I Learned to Love Citrus 
Additional fruits 
More information 
Activities I Like 
Kinds of Triathlon 
The kind of triathlon I am aiming for 


“How I Learned to Love Citrus” 在 这 里 面 看 起 来 像 是 一 个 节 标 题 而 不 是 子 标题 。 这 个 问题 可 
以 用 hgroup 元 素 解决 ， 如 代码 清单 10-3 所 示 。 


代码 清单 10-3 ”使 用 hgroup 元 素 


«IDOCTYPE HTML» CON 


«html» 
«head» 
«title»Example«/title» 
«meta name-"author" content-"Adam Freeman" /> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
hi, h2, h3 { background: grey; color: white; } 












































hgroup » hi ( margin-bottom: Opx;) 


hgroup » h2 ( background: grey; color: white; font-size: 1em; 
margin-top: Opx; ) 
«/style» 
«/head» 
«body» 
<hgroup> 
«hi»Fruits I Like</h1> 
«h2»How I Learned to Love Citrus«/h2» 
</hgroup> 
I like apples and oranges. 
<h2>Additional fruits</h2> 
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 
<h3>More information</h3> 
You can see other fruits I like <a href="fruitlist.html">here</a>. 


«hi»Activities I like</h1> 
<p>I like to swim, cycle and run. I am in training for my first triathlon, 
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but it is hard work.</p> 
<h2>Kinds of Triathlon</h2> 
There are different kinds of triathlon - sprint, Olympic and so on. 
<h3>The kind of triathlon I am aiming for</h3> 
I am aiming for Olympic, which consists of the following: 
<ol> 
<li>a.5km swim«/li» 
«li»40km cycle«/li» 
<1i>10km runc/li» 
</ol> 
</body> 
</html> 


hgroup 元 素 在 从 h1 到 h6 的 标题 体系 中 的 位 置 取决 于 其 第 一 个 标题 子 元 素 。 例 如 ， 上 述 代码 清 
单 中 hi 元 素 是 hgroup 元 素 的 第 一 个 子 元 素 ， 因 此 该 hgroup 元 素 的 级 别 相当 于 hl 元 素 。hgroup 元 素 
的 子 元 素 中 ， 只 有 第 一 个 标题 子 元 素 会 被 列 入 文档 的 大 纲 。 这 样 得 到 的 大 纲 如 下 所 示 : 

Fruits I Like 

Additional fruits 
More information 
Activities I Like 


Kinds of Triathlon 
The kind of triathlon I am aiming for 


那个 表示 子 标题 的 h2 元 素 在 这 个 例子 中 不 会 再 引起 混乱 , 这 是 因为 hgroup 元 素 表明 了 它 应 该 
被 忽略 。 这 里 要 处 理 的 另 一 个 事情 是 让 子 标题 在 外 观 上 与 普通 的 h2 元 素 有 所 区 别 。 代 码 清单 中 为 
此 设计 了 一 些 样式 ( CSS 选择 器 的 介绍 见 第 17 章 )， 其 效果 如 图 10-2 所 示 。 


i 
/ W Semple x Ve : 


€ Q | © titan/listings/example.html 家 入 




















Fruits I Like 
How I Learned to Love Citrus 


I like apples and oranges. 


Additional fruits 


I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 


fore information 


You can see other fruits I like here. 


Activities I like 


I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work. 


Kinds of Triathlon " 


L- J 


图 10-2 ”在 外 观 上 明确 体现 出 hgroup 中 的 元 素 之 间 的 关系 





m 




















10.3 ”生成 节 185 



































本 例 并 不 是 要 倡导 这 样 一 种 黑 乎 乎 的 风格 ,而 是 想 让 读者 看 到 : 通过 缩小 hgroup 元 素 中 两 个 
标题 元 素 的 间距 将 二 者 拉拢 在 一 起 , 并 且 为 二 者 设置 同样 的 背景 色 , 可 以 在 外 观 上 明确 揭示 二 者 
的 关系 。 


10.3 生成 节 


section 元 素 是 HTML5 中 新 增 的 。 顾 名 思 义 ， 它 表示 的 是 文档 中 的 一 节 。 使 用 标题 元 素 的 时 
候 实 际 上 也 生成 了 隐 含 的 节 。 用 section 元 素 则 可 以 明确 地 生成 节 并 且 将 其 与 标题 分 开 。 至 于 什 
么 情况 下 应 该 使 用 section 元 素 ， 并 没有 一 个 明确 的 规定 。 不 过 从 经 验 上 讲 ，section 元 素 用 来 包 
含 的 是 那 种 应 该 列 人 文档 大 纲 或 目录 中 的 内 容 。 section 元 素 通 常 包含 一 个 或 多 个 段落 及 一 个 标 
题 ， 不 过 标题 并 不 是 必需 的 。 表 10-5 概 括 了 section 元 素 。 






































表 10-5 ”section 元 素 





















































元 素 section 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 ， 但 section 元 素 不 能 是 address 元 素 的 后 代 元 素 
局 部 属性 无 

内 容 style 元 素 和 流 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 section { display: block; } 





代码 清单 10-4 示 范 了 section 元 素 的 用 法 。 
代码 清单 10-4 使 用 section 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
hi, h2, h3 { background: grey; color: white; } 
hgroup > hi { margin-bottom: Opx; } 
hgroup > h2 { background: grey; color: white; font-size: 1em; 
margin-top: Opx; } 
</style> 
</head> 
<body> 
<section> 
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<hgroup> 
«hi»Fruits I Like</h1> 
«h2»How I Learned to Love Citrus«/h2» 
«/hgroup» 
I like apples and oranges. 
«section» 
<h1>Additional fruits</h1> 
I also like bananas, mangoes, cherries, apricots, plums, 
peaches and grapes. 
<section> 
«hi»More information</h1> 
You can see other fruits I like <a href="fruitlist.html">here</a>. 
</section> 
</section> 
</section> 


«hi»Activities I like</h1> 

<p>I like to swim, cycle and run. I am in training for my first triathlon, 

but it is hard work.«/p» 

«h2»Kinds of Triathlon«/h2» 

There are different kinds of triathlon - sprint, Olympic and so on. 

<h3>The kind of triathlon I am aiming for</h3> 

I am aiming for Olympic, which consists of the following: 

«ol» 
«li»1.5km swim</li> 
«li»40km cycle«/li» 
«li»10km run«/li» 

«/ol» 

«/body» 
«/html» 


这 个 清单 中 定义 了 三 个 section 元 素 ， 它 们 一 个 能 一 个 。 注 意 每 个 section 中 的 标题 元 素 都 是 
一 个 h1。 使 用 了 section 元 素 后 ， 浏 览 器 就 会 负责 理 | oe 让 作者 从 确定 和 管 
理 各 个 标题 元 素 的 正确 次 序 的 差事 中 解脱 出 来 一 一 至 少 理论 上 是 这 样 。 实际 上 浏览 器 的 实现 可 能 
SAHA. Chrome, 、IE9 和 Firefox 都 能 推断 出 Uem 确定 每 个 hi 元素 的 相对 级 别 ， 如 
图 10-3 所 示 。 

这 个 效果 不 错 。 不 过 善于 观察 的 读者 会 发 现 内 容 为 “FruitsILike” 的 h1 元 素 的 字号 比 同 级 的 
另 一 个 h1 元 素 (BARA "Activities I like” 的 那个 ) 小 。 这 是 因为 包括 Chrome 和 Firefox 在 内 的 
一 些 浏览 器 对 位 于 section、article、aside 和 nav 元 素 (本章 稍 后 会 介绍 后 面 三 个 元 素 ) 中 的 h1 
TER (以 及 从 hn2 到 h6 的 标题 元 素 ) 应 用 的 样式 有 所 不 同 , 它们 给 予 这 种 情况 下 的 ht 元 素 的 习惯 样 
式 与 正常 情况 下 的 h2 元 素 相同 。IE9 不 会 这 样 做 ， 其 显示 结果 如 图 10-4 所 示 。 这 才 是 正确 的 行为 。 

此 外 ， 并 非 所 有 浏览 器 都 能 为 内 骨 在 section 元 素 中 的 同 种 标题 元 素 建立 正确 的 层次 结构 。 
图 10-5 是 这 些 元 素 在 Opera 中 的 显示 结果 。Safari 跟 它 是 一 个 路 子 。 两 者 都 忽略 了 section 元 素 建 立 
起 来 的 层次 结构 。 

Chrome 和 Firefox 应 用 的 特殊 样式 带 来 的 问题 可 以 通过 创建 自 定义 样式 ( 如 第 4 章 所 述 ， 其 优 
先 级 高 于 浏览 器 定义 的 样式 ) 克服 。 正 的 处 理 方式 倒 还 符合 预期 。 但 是 对 于 Opera 和 Safari 就 没 什 
么 好 办 法 了 。 在 浏览 器 对 这 方面 的 处 理 方式 一 致 之 前 ， 要 谨慎 使 用 这 个 方便 的 元 素 。 
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/@ Example XE 
€ Œ | O titan/listings/example.html WoW 
Fruits I Like 
How I Learned to Love Citrus 
I like apples and oranges. 


dditional fruits 
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 


More information 





You can see other fruits I like here. 


Activities I like 


I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work. 


Kinds of Triathlon 


图 10-3 ”内 舰 hi 元 素 的 section 元 素 在 Chrome 中 的 显示 结果 




















eram) 


D BY http://titan/listings/example.htmi 


Fruits I Like 
How I Learned to Love Citrus 


I like apples and oranges. 


Additional fruits 


I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 


You can see other fruits I like here. 


Activities I like 


I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work. 


inds of Triathlon - 
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ES 
[li example x Em 
| (€|9. | or} || | 各 @ Web J titan/listings/example.html ~| [l| Search with Goo: | P 
ü LI . F 
Fruits I Like 
a iHow I Learned to Love Citrus 
| I like apples and oranges. = 


有 Additional fruits 


e I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 


e 
More information 


| You can see other fruits I like here. 











| Update Ready @ View (100%) 
| 








图 10-5 Aih My sectiong6 AE Opera H bz £g 


10.4 添加 首部 和 尾部 


header 元 素 表示 一 节 的 首部 。 里 面 可 以 包含 各 种 适合 出 现在 首部 的 东西 ， 包 括 刊 头 或 徽标 。 
在 内 舱 的 元 素 方面 ，header 元 素 通常 包含 一 个 标题 元 素 或 一 个 ngroup 元 素 ， 还 可 以 包含 该 节 的 导 
航 元 素 〈 导航 的 问题 详 见 10.5 节 对 nav 元 素 的 说 明 )。 表 10-6 概 括 了 header 元 素 。 


表 10-6 ”header 元 素 












































元 素 header 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 。header 元 素 不 能 是 address 、footer 元 素 和 其 他 header 元 素 
的 后 代 元 素 

局 部 属性 无 

内 容 流 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 header { display: block; } 





footer 元 素 是 header 元 素 的 配套 元 素 , 表示 一 节 的 尾部 。footer 通 常 包含 着 该 节 的 总 结 信息 ， 
还 可 以 包含 作者 介绍 、 版 权 信息 、 到 相关 内 容 的 链接 、 徽 标 及 免责 声明 等 。 表 10-7 概 括 了 footer 


元 素 。 
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元 素 
元 素 类 型 
允许 具有 的 父 元 素 














HT 


局 部 属 怕 











标签 用 法 
是 否 为 HTML5 新 增 
在 HTML5 中 的 变化 
习惯 样式 











表 10-7 footer 元 素 
footer 


流 





任何 可 以 包含 流 元 素 的 元 素 。footer 元 素 不 能 是 address 、header 元 素 和 














的 后 代 元 素 


无 
流 内 容 
开始 标签 和 结束 标签 
是 

无 


footer { display: block; } 


代码 清单 10-5 示 范 了 header 元 素 和 footer 元 素 的 用 法 。 





代码 清单 10-5 ”使 用 header 和 footer 元 素 


<!DOCTYPE HTML» 
<html> 
<head> 


<title>Example</title> 

<meta name="author" content="Adam Freeman"/> 

<meta name="description" content="A simple example"/> 

<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 


<style> 


hi, h2, h3 { background: grey; color: white; } 
hgroup > hi { margin-bottom: 0; margin-top: 0} 
hgroup > h2 { background: grey; color: white; font-size: 1em; 


margin-top: Opx; margin-bottom: 2px} 


body > header *, footer > * ( background:transparent; color:black; } 
body > section, body > section > section, 
body > section > section > section (margin-left: 10px;] 


body > header, body > footer { 
border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0; 


} 
</style> 
</head> 
<body> 
<header> 
<hgroup> 





«hi»Things I like«/hi» 
<h2>by Adam Freeman</h2> 


</hgroup> 
</header> 
<section> 

<header> 


他 footer 元 素 
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<hgroup> 


<hi>Fruits I Like</h1> 
<h2>How I Learned to Love Citrus</h2> 


</hgroup> 
</header> 
I like apples and oranges. 
<section> 


«hi»Additional fruits</h1> 
I also like bananas, mangoes, cherries, apricots, plums, 


peaches and grapes. 
<section> 


«hi»More information</h1> 
You can see other fruits I like <a href="fruitlist.html">here</a>. 


«/section» 
«/section» 
«/section» 


«section» 
«header» 


<hi>Activities I like</h1> 


</header> 
<section> 


<p>I like to swim, cycle and run. I am in training for my first 
triathlon, but it is hard work.</p> 

«hi»Kinds of Triathlon</h1> 

There are different kinds of triathlon - sprint, Olympic and so on. 


«section» 


«hi»The kind of triathlon I am aiming for</h1> 
I am aiming for Olympic, which consists of the following: 


«ol» 


«li»1.5km swim«/li» 
«li»40km cycle</li> 
«li»10km run«/li» 





«/ol» 
«/section» 
«/section» 
«/section» 
«footer id-"mainFooter"» 


&#169;2011, Adam Freeman. «a href="http://apress.com">Visit Apress</a> 


«/footer» 
«/body» 
«/html» 


本 例 定义 了 3 个 header 元 素 。 作 为 body 元 素 子 元 素 的 header 元 素 被 视 为 整个 文档 的 首部 ( 注意 ， 























这 与 第 7 章 介 绍 过 的 head 元 素 不 是 一 回 事 )。 而 作为 某 节 (不管 是 隐 舍 定义 的 还 是 用 section 元 素 











明确 定义 的 ) 组 成 部 分 的 header 元 素 只 是 该 节 的 首部 。 例 中 定义 了 一 些 样式 ， 以 便 看 出 各 节 和 标 


题 之 间 的 层次 关系 。 代 码 清单 的 显示 结 








如 图 10-6 所 示 。 


注意 图 中 各 部 分 的 字号 差别 。Chrome 和 Firefox 对 位 于 section 元 素 中 的 各 级 标题 元 素 的 习惯 




















样式 进行 了 调整 ， 其 原因 可 以 想见 , 那 是 为 了 区 别 顶 层 header 中 的 ht 和 内 极 在 section 中 的 h1。 尽 
管 这 不 足以 构成 无 端 调整 样式 的 正当 理由 ， 但 好 碌 算 是 顾及 了 这 种 需要 。 
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E Example 


CO titan/listings/example.html 


ae | Ilike 
ae | Adam Freeman 


nl ruits I Like 
| EO ee | Learned to Love Citrus 
I like apples and oranges. 


cil 
x Wes 
€ 




















图 10-6 ”使 用 header 元 素 








footer 的 效果 如 图 10-7 所 示 。 


10.5 





©2011, Adam Freeman. Visit Apress 











添 aN JH 导航 区 域 


10-7 ”添加 footer 元 素 





nav 元 素 表 示 文 档 中 的 一 个 区 域 ， 它 包含 着 到 其 他 页 面 或 同一 页 面 的 其 他 部 分 的 链接 。 显 然 ， 
并 非 所 有 的 超 链接 都 要 放 到 nav 元 素 中 。 该 元 素 的 目的 是 规划 出 文档 的 主要 导航 区 域 。 表 10-8 概 
括 了 nav 元 素 。 


元 素 
元 素 
允许 
局 部 
内 容 
标签 
是 否 





具有 的 父 元 素 
属性 





用 法 
为 HTML5 新 增 





在 HTML5 中 的 变化 
习惯 样式 





表 10-8 nav 元 素 
nav 


E 
vit 

















任何 可 以 包含 流 元 素 的 元 素 。 但 是 该 元 素 不 能 是 address 元 素 的 后 代 元 素 
无 

流 内 容 

开始 标签 和 结束 标签 


E 
AE 


无 
nav { display: block; } 


Sy 


代码 清单 10-6 示 范 了 nav 元 素 的 用 法 。 
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代码 清单 10-6 ”使 用 nav 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
hi, h2, h3 { background: grey; color: white; } 
hgroup > hi { margin-bottom: 0; margin-top: 0} 
hgroup > h2 { background: grey; color: white; font-size: 1em; 
margin-top: Opx; margin-bottom: 2px} 


body > header *, body > footer * { background:transparent; color:black; } 
body > section, body > section > section, 
body > section > section > section (margin-left: 10px; } 


body > header, body > footer { 
border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0; 


} 


body > nav { text-align: center; padding: 2px; border : dashed thin black; } 
body > nav > a {padding: 2px; color: black} 
</style> 
</head> 
<body> 
<header> 
<hgroup> 
<hi>Things I like</h1> 
<h2>by Adam Freeman</h2> 


</hgroup> 
<nav> 
«ha»Contents«/h1» 
«ul» 
«li»x«a href="#fruitsilike">Fruits I Like«/a»«/li» 
«ul» 
<li><a href="#morefruit">Additional Fruits«/a»«/li» 
</ul> 
<li><a href="#activitiesilike">Activities I Like«/a»«/li» 
<ul> 
<li><a href="#tritypes">Kinds of Triathlon«/a»«/li» 
<li><a href="#mytri">The kind of triathlon I am 
aiming for«/a»«/li» 
</ul> 
</ul> 
</nav> 
</header> 
<section> 
<header> 
<hgroup> 


<h1 id="fruitsilike">Fruits I Like</h1> 
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<h2>How I Learned to Love Citrus</h2> 
</hgroup> 
</header> 
I like apples and oranges. 
<section> 
<h1 id="morefruit">Additional fruits</h1> 
I also like bananas, mangoes, cherries, apricots, plums, 
peaches and grapes. 
<section> 
<h1>More information</h1> 
You can see other fruits I like <a href="fruitlist.html">here</a>. 
</section> 
</section> 
</section> 


<section> 
<header> 
<h1 id="activitiesilike">Activities I like</h1> 
</header> 
<section> 
<p>I like to swim, cycle and run. I am in training for my first 
triathlon, but it is hard work.</p> 
<h1 id="tritypes">Kinds of Triathlon«/hi» 
There are different kinds of triathlon - sprint, Olympic and so on. 
<section> 
«hi id="mytri">The kind of triathlon I am aiming for</h1> 
I am aiming for Olympic, which consists of the following: 
«ol» 
«li»1.5km swim«/li» 
«li»40km cycle«/li» 
«li»10km run«/li» 
«/ol» 
</section> 
</section> 
</section> 
<nav> 
More Information: 
<a href="http://fruit.org">Learn More About Fruit</a> 
<a href-"http://triathlon.org"»Learn More About Triathlons</a> 
</nav> 
<footer id="mainFooter"> 
&#169;2011, Adam Freeman. «a href-"http://apress.com"»Visit Apress</a> 
</footer> 
</body> 
</html> 


为 了 显示 nav 元 素 的 灵活 性 ， 此 例 在 文档 中 使 用 了 两 个 nav 元 素 。 第 一 个 为 用 户 提 供 了 在 文档 
中 导航 的 途径 。 在 这 个 元 素 内 部 用 ul、1i 和 a 元 素 生 成 了 一 个 相对 链接 的 层次 结构 。 其 显示 效果 
如 图 10-8 所 示 。 

这 个 nav 元 素 被 放 在 文档 的 主 header 元 素 中 。 这 不 是 强制 性 的 ， 只 不 过 我 喜欢 这 样 安排 以 表 
示 它 是 主 nav 元 素 。 注 意 这 个 元 素 的 内 容 中 混杂 着 hi 元 素 和 其 他 内 容 。nav 元 素 可 以 包含 任何 流 内 
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容 ， 而 不 限于 超 链 接 。 例 中 把 第 二 个 nav 元 素 放 在 文档 末尾 ， 它 为 用 户 提供 了 一 些 链 接 ， 以 便 其 
获取 更 多 信息 。 该 元 素 在 浏览 器 中 的 显示 结果 如 图 10-9 所 示 。 


r 
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Things I like | 


by Adam Freeman 


Contents 





* Enuits I Like 


*. 


9 Kinds of Triathlon 
9 The kind of triathlon I am aiming for 


ruits I Like | 
How I Learned to Love Citrus | 


I like apples and oranges. 

















图 10-8 用 section 元 素 生 成 内 容 导 航 区 域 





2. 40km cycle | 
3. 10km mn | 


©2011, Adam Freeman. Visit Apress 








图 10-9 用 nav 元 素 提供 指向 外 部 的 导航 途径 


此 例 在 文档 的 style 元 素 中 为 两 个 nav 元 素 设 定 了 一 些 样式 ， 让 这 些 附 加 的 部 分 在 外 观 上 区 别 
于 其 他 部 分 。nav 元 素 的 习惯 样式 并 没有 给 予 其 内 容 与 众 不 同 的 外 观 。 


10.6 ”使 用 article 


article 元 素 代 表 HTML 文 档 中 一 段 独立 成 篇 的 内 容 ， 从 理论 上 讲 ， 可 以 独立 于 页 面 其 余 
内 容 发 布 或 使 用 ( 例如 通过 RSS )。 这 不 是 说 作者 必须 单独 发 布 它 ， 而 是 说 判断 是 否 使 用 该 元 
素 时 要 以 独立 性 为 依据 。 一 篇 新 文章 和 博文 条 目 都 是 这 方面 的 典型 例子 。 表 10-9 概 括 了 article 
元 素 。 
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表 10-9 _ article 元 素 









































元 素 article 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 , 但 该 元 素 不 能 是 address 元 素 的 后 代 元 素 
局 部 属性 无 

内 容 style 元 素 和 流 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 article { display: block; } 


代码 清单 10-7 示 范 了 article 元 素 的 用 法 。 
代码 清单 10-7 使 用 article 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«style» 
hi, h2, h3, article » footer ( background: grey; color: white; ] 
hgroup > hi { margin-bottom: 0; margin-top: 0} 
hgroup > h2 { background: grey; color: white; font-size: 1em; 
margin-top: Opx; margin-bottom: 2px} 





body > header *, body > footer * { background:transparent; color:black; } 


article {border: thin black solid; padding: 10px; margin-bottom: 5px} 
article > footer (padding:5px; margin: 5px; text-align: center} 
article > footer > nav > a {color: white} 


body > article > section, 
body > article > section > section {margin-left: 10px;} 


body > header, body > footer { 
border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0; 
} 


body > nav { text-align: center; padding: 2px; border : dashed thin black; } 
body > nav > a {padding: 2px; color: black} 
</style> 
</head> 
<body> 
<header> 
<hgroup> 
«hi»Things I like</h1> 
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<h2>by Adam Freeman</h2> 
</hgroup> 
<nav> 
<h1>Contents</h1> 
<ul> 
<li><a href="#fruitsilike">Fruits I Like«/a»«/li» 
<li><a href="H#activitiesilike">Activities I Like</a></li> 
</ul> 
</nav> 
</header> 


<article> 
<header> 
<hgroup> 
<h1 id="fruitsilike">Fruits I Like</h1> 
<h2>How I Learned to Love Citrus</h2> 
</hgroup> 
</header> 
I like apples and oranges. 
<section> 
<h1 id="morefruit">Additional fruits</h1> 
I also like bananas, mangoes, cherries, apricots, plums, 
peaches and grapes. 
<section> 
<h1>More information</h1> 
You can see other fruits I like <a href="fruitlist.html">here</a> 
</section> 
</section> 
<footer> 
<nav> 
More Information: 
<a href="http://fruit.org">Learn More About Fruit</a> 
</nav> 
</footer> 
</article> 


<article> 
<header> 
<hgroup> 
«hi id-"activitiesilike"»Activities I like«/hi» 
<h2>It hurts, but I keep doing it</h2> 
«/hgroup» 
«/header» 
«section» 
<p>I like to swim, cycle and run. I am in training for my first 
triathlon, but it is hard work.«/p» 
«hi id-"tritypes"»Kinds of Triathlon</h1> 
There are different kinds of triathlon - sprint, Olympic and so on. 
«section» 
«hi id-"mytri"»The kind of triathlon I am aiming for</h1> 
I am aiming for Olympic, which consists of the following: 
«ol» 
«li»1.5km swim</li> 
«li»40km cycle</li> 
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«li»10km run«/li» 
«/ol» 
«/section» 
«/section» 
«footer» 
«nav» 
More Information: 
«a href-"http://triathlon.org"»Learn More About Triathlons«/a» 
«/nav» 
</footer> 
</article> 


<footer id="mainFooter"> 
&#169;2011, Adam Freeman. «a href-"http://apress.com"»Visit Apress</a> 
</footer> 
</body> 
</html> 


此 例 调整 了 文档 的 结构 以 向 博客 通常 采用 的 格局 看 齐 ， 不 过 这 恐怕 不 能 说 是 最 精彩 的 博客 。 
文档 的 主体 分 作 三 大 部 分 。 第 一 部 分 是 一 个 header 元 素 , 它 汇总 了 各 条 博文 信息 ， 为 文档 其 他 部 
分 提供 了 一 个 铺 点 。 第 二 部 分 是 末尾 那个 footer 元 素 ， 它 与 header 相 照应 ， 提 供 了 适合 于 其 余 内 
容 的 基本 信息 。 新 增加 的 东西 在 第 三 部 分 ，article 元 素 。 例 中 的 每 个 article 描 述 了 作者 喜欢 的 
一 件 事物 。 因 为 对 作者 喜欢 的 每 件 事物 的 描述 都 独立 成 篇 ， 单 独 发 表 也 说 得 过 去 ， 所 以 这 些 
article 元 素 的 使 用 满足 独立 性 方面 的 要 求 。 这 里 照样 设置 了 一 些 样式 ， 以 便 突出 显示 article 元 
素 。 效 果 如 图 10-10 所 示 。 

















a SS 


Fruits I Like 
How I Learned to Love Citrus 


I like apples and oranges. 


Additional fruits 


I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. 


You can see other fruits I like here 


More Information: Learn More About Fruit 














图 10-10 使 用 article 元 素 
article 元 素 跟 其 他 一 些 新 增 的 语义 元 素 一 样 可 以 灵活 使 用 。 例 如 ，article 元 素 可 以 散 套 使 
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用 : 原文 用 一 个 ， 然 后 每 次 更 新 或 得 到 的 评论 又 用 一 个 。 与 其 他 一 些 元 素 类 似 ，article 元 素 的 
值 与 上 下 文 相关 。 它 可 能 在 某 种 内 容 中 能 够 带 来 富有 含义 的 结构 ， 而 换个 地 方 就 未 必 如 此 。 这 需 
要 文档 作者 自行 衡量 ( 并且 保 持 用 法 的 一 致 )。 


10.7 生成 附注 栏 


aside 元 素 用 来 表示 跟 周边 内 容 稍 沾 一 点 边 的 内 容 ， 类 似 于 书籍 或 杂志 中 的 侧 栏 。 其 内 容 与 


页 面 其 他 内 容 、article 或 section 有 点 关系 , 但 并 非 主 体内 容 的 一 部 分 。 它 可 能 是 一 些 背景 信息 、 
到 相关 文章 的 链接 ， 诸 如 此 类 。 表 10-10 概 括 了 aside 元 素 。 


表 10-10 aside 元 素 









































元 素 aside 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 ， 但 该 元 素 不 能 是 address 元 素 的 后 代 元 素 
局 部 属性 无 

内 容 style 元 素 和 流 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 aside { display: block; } 


代码 清单 10-8 示 范 了 aside 元 素 的 用 法 。 例 中 为 一 篇 文章 添加 了 一 个 aside 元 素 ， 并 为 其 设置 
一 些 样 式 ， 让 它 看 起 来 就 像 是 杂志 上 的 简单 侧 栏 。 


代码 清单 10-8 添加 aside 元 素 并 为 其 设置 样式 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
hi, h2, h3, article > footer ( background: grey; color: white; } 
hgroup > hi ( margin-bottom: 0; margin-top: 0} 
hgroup » h2 ( background: grey; color: white; font-size: 1em; 
margin-top: Opx; margin-bottom: 2px] 











body > header *, body > footer * { background:transparent; color:black; } 


article (border: thin black solid; padding: 10px; margin-bottom: 5px} 
article > footer {padding:5px; margin: 5px; text-align: center} 
article > footer > nav > a {color: white} 
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body > article > section, 
body > article > section > section {margin-left: 10px;} 
body > header, body > footer { 
border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0; 
} 
body > nav { text-align: center; padding: 2px; border : dashed thin black; } 
body > nav > a {padding: 2px; color: black} 


aside { width:40%; background:white; float:right; border: thick solid black; 
margin-left: 5px; } 
aside > section { padding: 5px;} 
aside > h1 (background: white; color: black; text-align:center} 
</style> 
</head> 
<body> 
<header> 
<hgroup> 
«hi»Things I like</h1> 
<h2>by Adam Freeman</h2> 
</hgroup> 
<nav> 
«hi»Contents«/h1» 
«ul» 
«li»«a href="#fruitsilike">Fruits I Like«/a»«/li» 
<li><a href="#activitiesilike">Activities I Like«/a»«/li» 
«/ul» 
</nav> 
</header> 


<article> 
<header> 
<hgroup> 
<h1 id="fruitsilike">Fruits I Like</h1> 
<h2>How I Learned to Love Citrus</h2> 
</hgroup> 
</header> 
<aside> 
«hi»Why Fruit is Healthy</h1> 
<section> 
Here are three reasons why everyone should eat more fruit: 
<ol> 
<li>Fruit contains lots of vitamins</li> 
<li>Fruit is a source of fibre</li> 
<li>Fruit contains few calories«/li» 
</ol> 
</section> 
</aside> 
I like apples and oranges. 
<section> 
<h1 id="morefruit">Additional fruits</h1> 
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I also like bananas, mangoes, cherries, apricots, plums, 
peaches and grapes. 
<section> 
«hi»More information</h1> 
You can see other fruits I like <a href-"fruitlist.html"»here«/a» 
</section> 
</section> 
<footer> 
<nav> 
More Information: 
<a href="http://fruit.org">Learn More About Fruit</a> 
</nav> 
</footer> 
</article> 
<article> 
<header> 
<hgroup> 
<h1 id-"activitiesilike"»Activities I like</h1> 
<h2>It hurts, but I keep doing it</h2> 
</hgroup> 
</header> 
<section> 
<p>I like to swim, cycle and run. I am in training for my first 
triathlon, but it is hard work.</p> 
«hi id-"tritypes"»Kinds of Triathlon</h1> 
There are different kinds of triathlon - sprint, Olympic and so on. 
«section» 
«hi id-"mytri"»The kind of triathlon I am aiming for</h1> 
I am aiming for Olympic, which consists of the following: 
«ol» 
«li»1.5km swim</li> 
«li»40km cycle«/li» 
«li»10km run«/li» 
«/ol» 
«/section» 
«/section» 
«footer» 
«nav» 
More Information: 
«a href="http://triathlon.org">Learn More About Triathlons</a> 
</nav> 
</footer> 
</article> 
«footer id-"mainFooter"» 
88169,2011, Adam Freeman. «a href-"http://apress.com"»Visit Apress«/a» 
«/footer» 
«/body» 
</html> 


这 个 aside 元 素 及 其 样式 的 效果 如 图 10-11 所 示 。 图 中 显示 的 文档 在 清单 所 示 文 档 的 基础 上 添 
加 了 一 些 没有 意义 的 填充 文字 ， 让 内 容 的 布局 显得 更 加 清楚 。 
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Fruits 工 Like 
How I Learned to Love Citrus 


I like apples and oranges. Lorem ipsum dolor sit 

amet, consectetur adipisicing elit, sed do eiusmod Why Fruit is Healthy 
tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla 1. Fruit contains lots of vitamins 
pariatur. Excepteur sint occaecat cupidatat non 2. Fruitis a source of fibre 
proident, sunt in culpa qui officia deserunt mollit anim 3. Fruit contains few calories 

id est laborum. 


Additional fruits 


T also like bananas, mangoes, cherries. apricots, plums, peaches and grapes. Lorem ipsum 
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 


Here are three reasons why 
everyone should eat more fruit: 























图 10-11 添加 aside 元 素 并 为 其 设置 样式 








10.8 ”提供 联系 信息 
address 元 素 用 来 表示 文档 或 article 元 素 的 联系 信息 。 表 10-11 概 括 了 address 元 素 。 


#210-11 address 元 素 

































































元 素 address 

元 素 类 型 流 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 

局 部 属性 无 

内 容 流 内 容 。 但 是 标题 元 素 h1~h6、section、header、footer、nav、article 和 aside 元 素 不 能 用 
做 该 元 素 的 后 带 代 元 素 

标签 用 法 开始 标签 和 结束 标签 











是 否 为 HTML5 新 增 是 
在 HIML5 中 的 变化 无 
习惯 样式 address { display: block; font-style: italic; } 








address 元 素 身 为 article 元 素 的 后 代 元 素 时 ， 它 提供 的 联系 信息 被 视 为 该 article 的 。 否 则 ， 
当 address 元 素 身 为 body 元 素 的 子 元 素 时 ( 在 body 元 素 和 address 元 素 之 间 没 有 隔 着 article 元 素 )， 
它 提 供 的 联系 信息 被 视 为 整个 文档 的 。 
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address 元 素 不 能 用 来 表示 文档 或 文章 的 联系 信息 之 外 的 地 址 。 例 如 ， 它 不 能 用 在 文档 内 容 
中 表示 客户 或 用 户 的 地 址 。 代 码 清单 10-9 示 范 了 address 元 素 的 用 法 。 


代码 清单 10-9 使 用 address 元 素 


<body> 
<header> 
<hgroup> 
<h1>Things I like</h1> 
<h2>by Adam Freeman</h2> 
</hgroup> 
<address> 
Questions and comments? <a href="mailto:adam@myboringblog.com">Email me</a> 
</address> 
<nav> 
«hi»Contents«/h1» 
«ul» 
<li><a href="#fruitsilike">Fruits I Like</a></li> 
<li><a href="Hactivitiesilike">Activities I Like</a></li> 
</ul> 
</nav> 
</header> 


<article> 
<header> 
<hgroup> 


此 例 在 文档 的 header 元 素 中 添加 了 一 个 address 元 素 ， 用 它 提 供 一 个 电子 邮箱 地 址 ， 以 便 用 
户 (或 读者 ) 联系 我 。 新 增 这 部 分 的 显示 结果 如 图 10-12 所 示 。 





贺 Example uu 
€ Q | O titan/listings/example.htm iA 





Things I like 


by Adam Freeman 


Questions and comments? Email me 


Contents 











* Fnuits I Like 
* Activities I Like 





110-12 ”添加 address 元 素 


10.9 生成 详情 区 域 
details 元 素 在 文档 中 生成 一 个 区 域 ,用 户 可 以 展开 它 以 了 解 关于 某 主题 的 更 多 详情 表 10-12 











10.9 ”生成 详情 区 域 


203 





概括 了 details 元 素 。 























NA 
是 否 为 HTML5 新 增 
在 HTML5 中 的 变化 
习惯 样式 


3t 
D R 

















details 元 素 通 常 包含 一 个 summary 元 素 ， 后 者 的 作用 是 为 该 详情 区 域 生 成 一 个 说 明 标签 或 标 
题 。 表 10-13 概 括 了 summary 元 素 。 











元 素 

元 素 类 型 

允许 具有 的 父 元 素 
局 部 属性 
内 容 
标签 用 法 

是 否 为 HTML5 新 增 
在 HTML5 中 的 变化 
习惯 样式 




















#210-12 ”details 元 素 
details 


流 


E 














任何 可 以 包含 流 元 素 的 元 素 
open 
流 内 容 及 一 个 可 有 可 无 的 summary 元 素 
开始 标签 和 结束 标签 

是 

无 

details { display: block; } 























表 10-13 ”summary 元 素 
summary 
无 
details 元 素 
无 
短语 内 容 
开始 标签 和 结束 标签 


AL 
FE 


无 
summary { display: block; } 


代码 清单 10-10 同 时 示范 了 details 和 summary 元 素 的 用 法 。 


代码 清单 10-10 ”使 用 summary 和 details 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 


<title>Example</title> 


<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«style» 


hi, h2, h3, article > footer ( background: grey; color: white; } 
hgroup > hi { margin-bottom: 0; margin-top: 0} 
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hgroup > h2 { background: grey; color: white; font-size: 1em; 
margin-top: Opx; margin-bottom: 2px} 
body > header *, body > footer * { background:transparent; color:black; } 
body > article > section, 
body > article > section > section (margin-left: 10px; } 
body > header { 
border: medium solid black; padding-left: 5px; margin: 10px 0 10px 0; 
} 
article {border: thin black solid; padding: 10px; margin-bottom: 5px} 
details (border: solid thin black; padding: 5px} 
details » summary ( font-weight: bold) 
«/style» 
«/head» 
«body» 
«header» 
«hgroup» 
«hi»Things I like</h1> 
«h2»by Adam Freeman«/h2» 
«/hgroup» 
«/header» 
«article» 
«header» 
<hgroup> 
«hi id-"activitiesilike"»Activities I like</h1> 
<h2>It hurts, but I keep doing it</h2> 
«/hgroup» 
«/header» 
«section» 
<p>I like to swim, cycle and run. I am in training for my first 
triathlon, but it is hard work.«/p» 
«details» 
«summary»Kinds of Triathlon«/summary» 
There are different kinds of triathlon - sprint, Olympic and so on. 
I am aiming for Olympic, which consists of the following: 
«ol» 
<li>1.5km swim«/li» 
«li»40km cycle«/li» 
<li>10km run</1li> 
«/ol» 
</details> 
</section> 
</article> 
</body> 
</html> 


这 些 元 素 在 浏览 右 中 的 显示 效果 如 图 10-13 所 示 。 并 非 所 有 浏览 器 都 能 正确 支持 details 元 素 。 
IE9 就 是 一 个 表现 不 佳 的 例子 。 

从 图 中 可 以 看 到 ， 浏览 器 提供 了 一 个 界面 控件 。 它 被 激活 时 会 展开 并 显示 details 元 素 的 内 
容 。details 元 素 折 拢 时 ， 只 有 其 summary 元 素 的 内 容 可 见 。 要 证 页 面 一 显示 details 元 素 就 呈 展 开 
状态 ， 需 要 使 用 它 的 open 属 
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€ > CS Otitan/listings/example.html wow 


|| Things I like 
by Adam Freeman 
Activities I like 
t hurts, but I keep doing it 













I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work. 





v Kinds of Triathlon 


There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which 
consists of the following: 





l. L5km swim 
2. 40km cycle 
3. 10km run 
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增 的 。 尽管 制作 符合 规范 的 HTML5 文 档 不 是 非 用 这 些 新 元 素 不 可 ,但 是 在 为 HTML 带 来 语义 的 努 


小 结 














图 10-13 ”使 用 details 和 summary 元 素 


力 过 程 中 ,它们 是 最 主要 的 成 果 之 一 。 


表格 元 素 




















本 章 将 要 介绍 的 是 用 来 制作 表格 的 HTML 元 素 。 表 格 的 主要 用 途 是 以 网 格 的 形式 显示 二 维 数 


据 。 然 而 在 HTML 的 早期 版 本 中 , 用 表格 控 
允许 这 样 做 ， 取 而 代 之 的 是 新 增 的 CSS 表 格 特 怕 


H 














表 11-1 本 章 内 容 概要 


制 页 面 内 容 布 局 的 现象 很 常见 。 在 HTML5 中 已 经 不 再 
E ( 见 第 21 章 )。 表 11-1 概 括 了 本 章 内 容 。 

























































































| sm 解决 方案 代码 清单 
生成 基本 的 表格 使 用 table、tr 和 td 元 素 11-1、11-2 
为 表格 添加 表 头 单元 格 使 用 th 元 素 11-3 
区 分 行 表 头 和 列表 头 使 用 thead 和 tbody 元 素 11-4、11-5 
为 表格 添加 表 脚 使 用 tfoot 元 素 11-6 
生成 不 规则 表格 单元 格 使 用 th 和 td 元 素 定 义 的 colspan 和 rowspan 属 性 11-7 ~ 11-9 
将 单元 格 与 表 头 相关 联 以 满足 残障 辅助 技 使 用 th 和 td 元 素 定义 的 headers 属 性 11-10 
术 的 需要 
为 表格 添加 标题 使 用 caption 元 素 11-11 
对 表格 按 列 处 理 而 不 是 按 行 处 理 使 用 colgroup 和 col 元 素 11-12、11-13 
表示 表格 不 是 用 来 控制 页 面 布局 的 使 用 table 元 素 定义 的 border 属 性 11-14 
































11.1 生成 基本 的 表格 





有 三 个 元 素 是 每 个 表格 都 必须 要 有 的 : table、tr 和 td。 制 作 表格 的 元 素 还 有 其 他 一 些 一 一 
稍 后 就 会 介绍 ， 但 是 必须 从 本 节 所 讲 的 三 个 元 素 学 起 。 首 先 要 讲 的 元 素 table， 是 HTML 用 以 文 


持 表 格式 内 容 的 核心 元 素 ， 它 表示 HTML 文 档 中 的 表格 。 表 11-2 概 括 了 table 元 素 。 





表 11-2 tables 














元 素 table 
元 素 类 型 流 
允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 











局 部 属性 border 
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(HE) 
AF caption, colgroup, thead, tbody, tfoot, 、tr 、th 和 td 元 素 
标签 用 法 开始 标签 和 结束 标签 


是 否 为 HTML5 新 增 f 
在 HTML5 中 的 变化 summary、align、width、bgcolor、cellpadding、cellspacing、frame 和 rules 属 性 已 不 再 使 用 ， 
其 功能 改 用 CSS 实 现 。border 属 性 的 值 必须 设置 为 1。 表 格 边框 的 粗细 必须 用 CSS 设 置 
习惯 样式 table { display: table; border-collapse: separate; 

border-spacing: 2px; border-color: gray; } 















































下 一 个 核心 表格 元 素 是 tr， 它 表示 表格 中 的 行 。HTML 表 格 基 于 行 而 不 是 列 ， 每 个 行 必须 分 
别 标记 。 表 11-3 概 括 了 tr 元 素 。 


表 11-3 tr 元 素 





















































元 素 tr 

元 素 类 型 无 

允许 具有 的 父 元 素 table 、thead、tfoot 和 tbody 元 素 

局 部 属性 无 

内 容 一 个 或 多 个 td 或 th 元 素 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 否 E 
在 HTML5 中 的 变化 align、char、charoff、valign 和 和 bgcolor 属性 已 不 再 使 用 ， 其 功能 改 用 CSS 实 现 

习惯 样式 tr { display: table-row; vertical-align: inherit; 


border-color: inherit;} 


三 个 核心 元 素 中 的 最 后 一 个 是 td， 它 表示 表格 中 的 单元 格 。 表 11-4 概 括 了 td 元 素 。 


表 11-4 ”td 元 素 





























元 素 td 

元 素 类 型 无 

允许 具有 的 父 元 素 tr 元 素 

局 部 属性 colspan, rowspan, headers 

内 容 流 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 否 

在 HIML5 中 的 变化 scope 属 性 已 不 再 使 用 。abbr 、axis、align、width char, charoff, valign, bgcolor, height 





















































和 nowrap 属 性 已 不 再 使 用 ， 其 功能 改 用 CSS 实 现 
习惯 样式 td { display: table-cell; vertical-align: inherit; } 
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有 了 这 三 个 元 素 ， 就 可 以 用 它们 组 装 出 表格 ， 如 代码 清单 11-1 所 示 。 
代码 清单 11-1 用 table 、tr 和 td 元 素 制作 表格 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«table» 
<tr> 
<td>Apples</td> 
<td>Green</td> 
<td>Medium</td> 
</tr> 
<tr> 
<td>Oranges</td> 
<td>Orange</td> 
<td>Large</td> 
</tr> 
</table> 
</body> 
</html> 


此 例 定 义 了 一 个 两 行 (分 别 由 两 个 tr 元 素 表 示 ) 的 表格 。 每 行 有 三 列 ， 一 个 td 元 素 代表 一 
列 。td 元 素 可 以 包含 任何 流 内容 ， 但 本 例 只 使 用 了 文字 。 以 习惯 样式 显示 的 这 个 表格 如 图 11-1 
所 示 。 








Example 
€ Œ | Q titan/listings/example.htm XA 


| Apples Green Medium 
Oranges Orange Large 














图 11-1 显示 简单 表格 


这 个 表格 非常 简单 ， 不 过 足以 显示 出 基本 的 结构 。 浏 览 器 会 调整 行 与 列 的 尺寸 以 维持 表 
格 的 形式 。 下 面 做 个 试验 , 给 这 个 表格 添加 点 更 长 的 内 容 看 看 会 有 什么 变化 ， 如 代码 清单 11-2 
所 示 。 
代码 清单 11-2 添加 一 些 内 容 更 长 的 单元 格 


<!DOCTYPE HTML> 
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«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«table» 
<tr> 
<td>Apples</td> 
<td>Green</td> 
<td>Medium</td> 


<td>Oranges</td> 
<td>Orange</td> 
<td>Large</td> 
</tr> 
<tr> 
<td>Pomegranate</td> 
<td>A kind of greeny-red</td> 
<td>Varies from medium to large</td> 
</tr> 
</table> 
</body> 
</html> 


BAERS tAE HA EER ERA I AG TORO WERE E 
让 它们 宽度 一 致 ， 如 图 11-2 所 示 。 


r 

















E cll 
j Example N 
€ Q | Q titan/listings/example.htm wht 
Apples Green Medium 
Oranges Orange Large 
Pomegranate A kind of greeny-red Varies from medium to large 














图 11-2 ”重新 调整 单元 格 的 大 小 以 容纳 更 长 的 内 容 


table 元 素 最 棒 的 特性 之 一 是 作者 不 必 操 心太 二 的 问题 。 浏 览 器 会 保证 让 列 的 宽度 足以 容纳 
最 宽 的 内 容 ， 让 行 的 高 度 足 以 容纳 最 高 的 单元 格 。 


11.2 ”添加 表 头 单元 格 
th 元 素 表 示 表 头 的 单元 格 ， 它 可 以 用 来 区 分 数据 和 对 数据 的 说 明 。 表 11-$ 概 括 了 th 元 素 。 











表 11-5 th 元 素 











































































































元 素 th 
元 素 类 型 无 
允许 具有 的 父 元 素 tr 元 素 
局 部 属性 colspan、rowspan、scope 和 headers 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 省 
在 HTML5 中 的 变化 scope 属性 已 不 再 使 用 ; abbr, axis, align, width, char, charoff, valign, bgcolor, height 
和 nowrap 属 性 已 不 再 使 用 ， 其 功能 改 用 CSS 实 现 
习惯 样式 th { display: table-cell; vertical-align: inherit; 
font-weight: bold; text-align: center; } 





代码 清单 11-3 在 表格 中 添加 了 一 些 th 元 素 ， 用 以 说 明 td 元 素 中 包含 的 数据 的 含义 。 
代码 清单 11-3 ”为 表格 添加 表 头 单元 格 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«table» 
<tr> 
<th>Rank</th><th>Name</th> 
<th>Color</th><th>Size</th> 
</tr> 
<tr> 
<th>Favorite:</th> 
<td>Apples</td><td>Green</td><td>Medium</td> 
</tr> 
<tr> 
<th>2nd Favorite:</th> 
<td>Oranges</td><td>Orange</td><td>Large</td> 
</tr> 
<tr> 
<th>3rd Favorite:</th> 
<td>Pomegranate</td><td>A kind of greeny-red</td> 
<td>Varies from medium to large</td> 
</tr> 
</table> 
</body> 
</html> 


从 代码 清单 中 可 以 看 到 : 可 以 在 一 行 中 混合 使 用 th 和 td 元 素 ， 也 可 以 让 一 行 包含 清一色 的 th 
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元 素 。 这 个 文档 在 浏览 器 中 的 显示 结果 如 图 11-3 所 示 。 





f EIS) 
j Example 
|e Œ |Q titan/listings/example.html wi A | 
Rank Name Color Size 
| Favorite: Apples Green Medium 
2nd Favorite: Oranges Orange Large 
3rd Favorite: Pomegranate A kind of greeny-red Varies from medium to large 




















图 11-3 ”为 表格 添加 表 头 单元 格 


11.3 ”为 表格 添加 结构 


基本 表格 有 了 , 但 现在 遇 到 一 个 问题 。 在 设置 表格 样式 的 时 候 就 会 发 现 ,要 区 别 全 是 th 元 素 
的 行 中 的 th 元 素 和 与 数据 单元 格 混在 一 行 中 的 th 元 素 并 不 容易 。 只 要 用 点 心思 , 这 是 可 以 办 到 的 。 
代码 清单 11-4 展 示 了 一 种 处 理 办 法 。 


代码 清单 11-4 ”区 分 表格 中 的 不 同 th 元 素 


<!DOCTYPE HTML> 
<head> 


<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
tr > th { text-align:left; background:grey; color:white} 
tr > th:only-of-type {text-align:right; background: lightgrey; color:grey} 
</style> 
</head> 
<body> 
<table> 











<th>Rank</th><th>Name</th><th>Color</th><th>Size</th> 


<th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td> 


<th>2nd Favorite: </th><td>Oranges</td><td>Orange</td><td>Large</td> 





«th»3rd Favorite: </th><td>Pomegranate</td><td>A kind of greeny-red</td> 
<td>Varies from medium to large</td> 
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</table> 
</body> 
</html> 


VCI FY DS eee. MERA thc, 男 一 个 只 匹配 tr 元 素 的 子 元 素 中 唯 
的 th 元 素 。 样 式 的 效果 如 图 11-4 所 示 。 
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ES) 
AA Example E 
| ¢ Q | Q titan/listings/example.htm! iX | 
Eee se 
Favorite: Apples Green 
2nd Favorite: Oranges Orange ^m 
3rd Favorite: Pomegranate A kind of greeny-red Varies from medium to large 
K J 























图 11-4 ”为 不 同 的 th 元 素 应 用 不 同 的 样式 

这 个 办 法 效果 不 错 , 却 有 失灵 活 。 要 是 在 数据 行 中 再 添加 别 的 th 元 素 ， 第 二 个 选择 器 就 不 起 
作用 了 。 我 可 不 想 每 改 一 下 表格 就 得 调整 一 人 CSS 选择 需 。 

要 想 灵活 处 理 这 个 问题 , 可 以 使 用 thead、tbody 和 tfoot 元 素 。 这 些 元 素 可 以 用 来 为 表格 添加 结 
构 。 表 格 有 了 结构 之 后 的 一 大 好 处 是 区 别处 理 不 同 部 分 更 简单 了 , 尤其 是 在 涉及 CSS 选 择 器 的 时 候 。 


11.3.1 ”表示 表 头 和 表格 主题 


tbody 元 素 表示 构成 表格 主体 的 全 体 行 
元 素 表 示 ， 稍 后 就 会 介绍 )。 



































脚 行 (它们 分 别 由 thead 和 tfoot 


表 11-6 tbodyJt X 





















































元 素 tbody 
元 素 类 型 (无 ) 
允许 具有 的 父 元 素 table 元 素 
局 部 属性 无 
内 容 零 个 或 多 个 tr 元 素 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 f 
在 HTML5 中 的 变化 align、char、charoff 和 valign 属 性 已 不 再 使 用 
习惯 样式 tbody { display: table-row-group; 





vertical-align: middle; border-color: inherit; } 


顺便 提 一 句 ， 即 便 在 文档 中 表格 没有 用 到 tbody 元 素 ， 大 多 数 浏 览 器 在 处 理 table 元 素 的 时 候 
都 会 自动 搬入 tbody 元 素 。 因 此 完全 根据 文档 中 的 表格 结构 来 设计 的 CSS 选 择 顺 有 可 能 不 管用 。 例 
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如 ， 由 于 浏览 器 在 table 和 tr 元 素 之 间 插 了 一 个 tbody 元 素 ， 所 以 table > tr 这 个 选择 器 会 失效 。 
为 了 应 对 这 种 情况 ， 需 要 使 用 table > tbody > tr 或 table tr (没有 字符 > ) 这 样 的 选择 器 ， 或 者 
干脆 写成 tbody > tr. 

thead 元 素 用 来 标记 表格 的 标题 行 。 表 11-7 概 括 了 thead 元 素 。 


表 11-7 thead 元 素 






































元 素 thead 

元 素 类 型 无 

允许 具有 的 父 元 素 table 元 素 

局 部 属性 无 

内 容 零 个 或 多 个 tr 元 素 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 align、char、charoff 和 valign 属 性 已 不 再 使 用 
习惯 样式 thead { display: table-header-group; 





vertical-align: middle; border-color: inherit; } 
如 果 没 有 thead 元 素 的 话 , 所 有 tr 元 素 都 会 被 视 为 表格 主体 的 一 部 分 。 代 码 清单 11-5 在 示例 表 
格 中 添加 了 thead 和 tbody 元 素 ， 并 且 相 应 地 使 用 了 更 为 灵活 的 CSS 选 择 器 。 
代码 清单 11-5 “为 表格 添加 thead 和 tbody 元 素 


<!DOCTYPE HTML» 














«html» 
«head» 
«title»Example«/title» 
«meta name-"author" content-"Adam Freeman" /> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
thead th ( text-align:left; background:grey; color:white} 
tbody th ( text-align:right; background: lightgrey; color:grey) 
</style> 
</head> 
<body> 
<table> 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td> 
</tr> 


<tr> 
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<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td> 
</tr> 


<tr> 
<th>3rd Favorite:</th><td>Pomegranate</td> 


<td>A kind of greeny-red</td><td>Varies from medium to large</td> 
</tr> 


</tbody> 
</table> 
</body> 
</html> 


个 改变 看 似 不 大 ,但 是 表格 增加 了 这 些 结构 之 后 ,区 别处 理 不 同类 型 的 单元 格 就 容易 多 了 ， 
也 不 和 表格 设计 改动 的 影响 。 


1 1 3.2 添加 表 脚 
tfoot 元 素 用 来 标记 组 成 表 脚 的 行 。 表 11-8 概 括 了 tfoot 元 素 。 











表 11-8 tfoot 元 素 

































































元 素 tfoot 

元 素 类 型 (无 ) 

允许 具有 的 父 元 素 table 元 素 

局 部 属性 无 

内 容 零 个 或 多 个 tr 元 素 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 tfoot 元 素 现在 出 现在 tbody 或 tr 元 素 前 后 都 可 以 。 在 HTML4 中 ， 它 只 能 出 现在 这 些 元 素 
之 前 。align、char 、charoff 和 valign 属 性 已 不 再 使 用 

习惯 样式 tfoot { display: table-footer-group; 


vertical-align: middle; border-color: inherit; } 


代码 清单 11-6 示 范 了 如 何 用 tfoot 元 素 为 表格 生成 表 脚 。 在 HTML5 之 前 ，tfoot 元 素 只 能 出 现 
在 tbody 元 素 ( 如 果 省 略 tbody 元 素 ， 则 是 第 一 个 tr 元 素 ) 之 前 。 在 HTML5 中 则 可 以 把 tfoot 元 素 放 
在 tbody 元 素 之 后 或 最 后 一 个 tr 元 素 之 后 , 这 与 浏览 器 显示 表格 的 方式 更 为 一 致 。 代 码 清单 11-6 中 的 
tfoot 位 于 第 一 种 位 置 一 一 其 实 哪 种 位 置 都 行 。 td A es tr M 
放 在 tbody 之 前 通常 更 方便 - 点 ， 而 手工 编写 HTML 代码 时 把 tfoot 放 在 tbody 之 后 要 更 自然 一 点 。 


代码 清单 11-6 ”使 用 tfoot 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
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<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
<style> 
thead th, tfoot th { text-align:left; background:grey; color:white} 
tbody th { text-align:right; background: lightgrey; color:grey} 
</style> 
</head> 
<body> 
<table> 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td> 
</tr> 
<tr> 
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td> 
</tr> 
<tr> 
«th»3rd Favorite: </th><td>Pomegranate</td> 


<td>A kind of greeny-red</td><td>Varies from medium to large</td> 
</tr> 


</tbody> 
</table> 
</body> 
</html> 


此 例 把 表 头 中 的 行 复制 到 了 表 脚 中 。 本 章 后 面 还 会 回头 把 这 个 表 脚 改 得 有 趣 一 点 。 文 档 中 有 
个 样式 还 添加 了 另 一 个 选择 器 ， 以 便 thead 和 tfoot 元 素 中 的 th 元 素 使 用 同样 的 样式 。 图 11-5 显 示 
了 新 添加 的 表 脚 。 
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2nd Favorite: Oranges Orange Large 
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图 11-5 ”为 表格 添加 表 脚 








11.4. 制作 不 规则 表格 


大 多 数 表格 都 是 简单 的 网 格 形式 , 每 个 单元 格 占据 网 格 中 的 一 个 位 置 。 但 是 为 了 表示 更 复杂 
的 数据 ， 有 时 需要 制作 不 规则 的 表格 ,其 中 的 单元 格 会 跨越 几 行 或 几 列 。 这 种 表格 的 制作 要 用 到 
td 和 th 元 素 的 colspan 和 rowspan 属 性 。 代 码 清 单 11-7 示 范 了 如 何 用 这 些 属性 制作 不 规则 表格 。 


代码 清单 11-7 ”制作 不 规则 表格 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
thead th, tfoot th ( text-align:left; background:grey; color:white] 
tbody th ( text-align:right; background: lightgrey; color:grey] 
[colspan], [rowspan] {font-weight:bold; border: medium solid black} 
thead [colspan], tfoot [colspan] {text-align:center; ) 
«/style» 
«/head» 
«body» 
«table» 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th> 
<th colspan="2">Size & Votes</th> 
</tr> 
</thead> 
<tbody> 
<tr> 












































<th>Favorite:</th><td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 


<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td> 
<td>Large</td><td>450</td> 


<th>3rd Favorite:</th><td>Pomegranate</td> 
<td colspan="2" rowspan="2"> 
Pomegranates and cherries can both come in a range of colors 
and sizes. 
</td> 
<td>203</td> 
</tr> 
<tr> 
<th rowspan="2">Joint 4th:</th> 
<td>Cherries</td> 
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<td rowspan="2">75</td> 
</tr> 
<tr> 
<td>Pineapple</td> 
<td>Brown</td> 
<td>Very Large</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<th colspan="5"> & copy; 2011 Adam Freeman Fruit Data Enterprises</th> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


想 让 一 个 单元 格 纵 跨 多 行 要 用 rowspan 属 性 ， 为 该 属性 设置 的 值 就 是 所 跨行 数 。 同 样 ， 想 让 
一 个 单元 格 横 跨 多 列 要 用 colspan 属 性 。 














提示 “为 Yowspan 和 colspan 设 置 的 值 必 须 是 整数 。 有 些 浏览 器 会 把 100% 这 个 值 理 解 为 表格 中 所 
有 的 行 或 列 ， 但 是 这 不 是 HTML5 标 准 中 的 内 容 ， 没 有 得 到 一 致 实现 。 


例 中 还 添加 了 一 些 样 式 ， 用 来 突出 显示 跨越 多 行 或 多 列 的 单元 格 。 如 图 11-6 所 示 。 相 关 单 元 


格 都 具有 粗 线 边框 。 Eu | 
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Pomegranates and cherries can both come in a range of colors and sizes] and cherries can both come im a range of colors and sizes. - 
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图 11-6 ”跨越 多 行 和 多 列 


colspan 和 rowspan 属 性 应 该 用 在 要 占据 的 网 格 左 上 角 那 个 单元 格 上 。 正 常情 况 下 位 于 它 所 跨 
越 的 位 置 上 的 td 和 th 元 素 此 时 则 被 省 略 。 下 面 来 看 一 个 例子 ， 先 看 看 代码 清单 11-8 所 示 的 表格 。 


代码 清单 11-8 一 个 简单 的 表格 


<!DOCTYPE HTML> 
<html> 
<head> 

















E 
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<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
td (border: thin solid black; padding: 5px; font-size:x-large]; 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 


<td>4</td> 
<td>5</td> 
<td>6</td> 


<td>7</td> 
«td»8«/td» 
«td»9«/td» 
</tr> 
</table> 
</body> 
</html> 


这 是 一 个 三 行 三 列 的 常规 表格 ， 如 图 11-7 所 示 。 
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图 11-7 一 个 常规 表格 


如 果 想 让 中 间 一 列 的 一 个 单元 格 纵 跨 所 有 三 行 ， 则 应 设置 2 号 单元 格 的 rowspan 属 性 ,这 是 因 
为 它 是 要 履 盖 的 网 格 区 域 中 最 靠 上 的 单元 格 〈 也 是 最 靠 左 的 ， 不 过 这 在 本 例 中 无 所 谓 )。 此 外 ， 
扩展 后 的 单元 格 将 覆盖 的 那些 单元 格 元 素 应 该 删除 ( 本 例 中 为 5 号 和 8 号 )。 代 码 清 单 11-9 中 实施 
了 这 些 改变 。 
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代码 清单 11-9 ”将 一 个 单元 格 扩展 到 多 行 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
td (border: thin solid black; padding: 5px; font-size:x-large}; 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td>1</td> 
<td rowspan="3">2</td> 
<td>3</td> 
</tr> 
<tr> 
<td>4</td> 
<td>6</td> 


<td>7</td> 
<td>9</td> 
</tr> 
</table> 
</body> 
</html> 


这 些 改动 的 结果 如 图 11-8 所 示 。 
G " [ede 一 | 


j By Example x Map 


————— 


|* Q | O titan/listings/examplehtml W% | A | 


2[s 

9 

图 11-8 ”将 一 个 单元 格 扩展 到 三 行 上 
浏览 器 会 负责 将 所 定义 的 其 他 单元 格 妥善 安置 在 扩展 后 的 单元 格 周围 。 
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式 数 据 。 使 用 重合 单元 格 唯一 的 原因 只 能 是 用 表格 元 素 布 置 其 他 元 素 ， 而 这 个 事情 应 该 
用 CSS 的 表格 特性 来 做 ( 见 第 21 章 )。 


11.5 ”把 表 头 与 单元 格 关联 起 来 
td 和 th 元 素 都 定义 了 headers 属 性 , 它 可 以 供 屏幕 阅读 器 和 其 他 残障 辅助 技术 用 来 简化 对 表格 


的 处 理 。headers 
个 属性 的 用 法 。 


代码 清单 11-10 


<!DOCTYPE HTM 
<html> 
<head> 
<tit 


<meta name="author" 





























属性 的 值 可 被 设置 为 一 个 或 多 个 th 单元 格 的 id 属性 值 。 代 码 清单 11-10 示 范 了 这 


使 用 headers 属 性 


L> 


e>Example</ti 


tle> 


content="Adam Freeman"/> 


«meta name-"description" content-"A simple example"/» 


«link 
<sty 


</sty 
</head> 
<body> 

<tab 





< 


< 
< 


rel="shortcut 


e» 


thead th, tfoot 
tbody th ( tex 
thead [colspan 


le» 


e» 
thead» 
«tr» 





icon" href-"favicon.ico" type-"image/x-icon" /» 


th ( text-align:left; background:grey; color:white] 


t-align:right; background: lightgrey; color:grey] 


, tfoot [colspan] {text-align:center; } 


«th id="rank">Rank</th> 

«th id="name">Name</th> 

«th id="color">Color</th> 

«th id-"sizeAndVotes" colspan="2">Size & Votes</th> 


</tr> 
/thead> 
tbody> 

<tr> 


AAK AA A 
ct ct ct ct c 
£L CL CC £L T 


</tr> 
<tr> 





AN AN A 
ct ct ct c 
CL CC IX 


id- 
headers-"name first">Apples</td> 
headers="color first">Green</td> 
headers="sizeAndVote first">Medium</td> 
headers="sizeAndVote first">500</td> 


"first" headers="rank">Favorite:</th> 


id="second" headers="rank">2nd Favorite:</th> 
headers="name second" >Oranges</td> 
headers="color second">Orange</td> 
headers="sizeAndVote second">Large</td> 
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<td headers="sizeAndVote second">450</td> 
</tr> 
</tbody> 
<tfoot> 
«tr» 
«th colspan-"5"» & copy; 2011 Adam Freeman Fruit Data Enterprises«/th» 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


此 例 为 thead 和 tbody 中 的 每 一 个 th 元 素 都 设置 了 全 局 的 id 属性 值 。tbody 中 的 每 一 个 td 和 th 
元 素 都 通过 设置 headers 属 性 将 相应 单元 格 与 列表 头 关联 起 来 。 其 中 td 元 素 还 指定 了 所 关联 的 行 
表 头 〈 出 现在 第 一 列 中 的 表 头 )。 


11.6 ”为 表格 添加 标题 


caption 元 素 可 以 用 来 为 表格 定义 一 个 标题 并 将 其 与 表格 关联 起 来 。 表 11-9 概 括 了 caption 
元 素 。 
































表 11-9 captiont# 
































元 素 caption 

元 素 类 型 无 

允许 具有 的 父 元 素 table 元 素 

局 部 属性 无 

内 容 MAA (但 不 能 是 table 元 素 ) 
标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 align 属 性 已 不 再 使 用 









































习惯 样式 caption { display: table-caption; text-align: center; } 





代码 清单 11-11 示 范 了 caption 元 素 的 用 法 。 
代码 清单 11-11 使 用 caption 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«style» 
thead th, tfoot th ( text-align:left; background:grey; color:white] 
tbody th ( text-align:right; background: lightgrey; color:grey] 





[colspan], [rowspan] {font-weight:bold; border: medium solid black} 
thead [colspan], tfoot [colspan] {text-align:center; } 
caption {font-weight: bold; font-size: large; margin-bottom: 5px} 
</style> 
</head> 
<body> 
<table> 
<caption>Results of the 2011 Fruit Survey</caption> 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th> 
<th colspan="2">Size & Votes</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 


«th»2nd Favorite:«/th»«td»Oranges«/td»«td»Orange«/td» 
<td>Large</td><td>450</td> 


<th>3rd Favorite:</th><td>Pomegranate</td> 

<td colspan="2" rowspan="2"> 
Pomegranates and cherries can both come in a range of colors 
and sizes. 

</td> 

<td>203</td> 

</tr> 

<tr> 





<th rowspan="2">Joint 4th:</th> 
<td>Cherries</td> 
<td rowspan="2">75</td> 


<td>Pineapple</td> 
<td>Brown</td> 
td>Very Large</td> 





^ 


</tr> 

</tbody> 

<tfoot> 
<tr> 

<th colspan="5"> & copy; 2011 Adam Freeman Fruit Data Enterprises</th> 

</tr> 

</tfoot> 

</table> 
</body> 
</html> 


一 个 表格 只 能 包含 一 个 caption 元 素 。 它 不 必 是 表格 的 第 一 个 子 元 素 ， 但 是 无 论 定义 在 什么 
位 置 ， 它 总 会 显示 在 表格 上 方 。 图 11-9 显 示 了 表格 标题 ( 及 所 应 用 的 样式 ) 的 效果 。 
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图 11-9 ”为 表格 添加 标题 




























11.7 ”处 理 列 


HTML 中 的 表格 是 基于 行 的 。 单 元 格 的 定义 都 要 放 在 tr 元 素 中 ， 而 表格 则 是 一 行 一 行 地 组 建 
出 来 的 。 因 此 对 列 应 用 样式 有 点 不 方便 ,对 于 包含 不 规则 单元 格 的 表格 更 是 如 此 。 这 个 问题 的 解 
决 办 法 是 使 用 colgroup 和 col 元 素 。colgroup 代 表 一 组 列 。 表 11-10 概 括 了 colgroup 元 素 。 


#211-10 ”colgroup 元 素 










































































元 素 colgroup 

元 素 类 型 无 

允许 具有 的 父 元 素 table 元 素 

局 部 属性 span 

内 容 者 个 或 多 个 col 元 素 ( 只 有 未 设置 span 属 性 时 才能 使 用 ) 
标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 width 、char 、charoff 和 valign 属 性 已 不 再 使 用 

习惯 样式 colgroup { display: table-column-group; } 





代码 清单 11-12 示 范 了 colgroup 元 素 的 用 法 。 
代码 清单 11-12 ”使 用 colgroup 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content="A simple example"/» 





<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<style> 
thead th, tfoot th { text-align:left; background:grey; color:white} 
tbody th { text-align:right; background: lightgrey; color:grey} 
[colspan], [rowspan] {font-weight:bold; border: medium solid black} 
thead [colspan], tfoot [colspan] {text-align:center; } 
caption {font-weight: bold; font-size: large; margin-bottom: 5px} 
#colgroup1 {background-color: red} 
#colgroup2 (background-color: green; font-size: small} 
</style> 
</head> 
<body> 
<table> 
<caption>Results of the 2011 Fruit Survey</caption> 
«colgroup id-"colgroupi" span="3"/> 
«colgroup id-"colgroup2" span-"2"/» 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th> 
<th colspan="2">Size & Votes</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 


<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td> 
<td>Large</td><td>450</td> 


«th»3rd Favorite: </th><td>Pomegranate</td> 

<td colspan="2" rowspan="2"> 
Pomegranates and cherries can both come in a range of colors 
and sizes. 

</td> 

<td>203</td> 

</tr> 

<tr> 





<th rowspan="2">Joint 4th:</th> 
<td>Cherries</td> 
<td rowspan="2">75</td> 


<td>Pineapple</td> 
<td>Brown</td> 
td>Very Large</td> 





^ 


</tr> 
</tbody> 
<tfoot> 
<tr> 
<th colspan="5"> & copy; 2011 Adam Freeman Fruit Data Enterprises</th> 
</tr> 
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</tfoot> 
</table> 
</body> 
</html> 


此 例 定 义 了 两 个 colgroup 元 素 。span 属 性 指定 了 colgroup 元 素 负责 的 列 数 。 代 码 清单 中 的 第 
一 个 colgroup 负 责 表格 中 的 前 三 列 ， 另 一 个 colgroup 负 责 剩 余 两 列 。 两 个 colgroup 元 素 都 设置 了 
id 属性 值 ， 并 以 其 id 值 为 选择 器 定义 了 相应 的 CSS 样 式 。 其 效果 如 图 11-10 所 示 。 
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图 11-10 使 用 colgroup 元 素 


该 图 揭示 了 colgroup 元 素 使 用 中 的 一 些 重要 特点 。 首 先 ， 应 用 到 colgroup 上 的 CSS 样 式 在 具 
体 程度 上 低 于 直接 应 用 到 tr 、td 和 th 元 素 上 的 样式 。 从 应 用 到 thead、tfoot 和 第 一 列 th 元 素 上 的 
样式 未 受 应 用 到 colgroup 元 素 上 的 样式 的 影响 就 能 看 出 这 一 点 。 要 是 把 针对 colgroup 元 素 的 样式 
之 外 的 样式 都 删除 邱 ， 那 么 所 有 单元 格 都 会 受到 colgroup 样 式 的 影响 ， 如 图 11-11 所 示 。 
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Results of the 2011 Fruit Survey 














图 11-11 删除 了 针对 colgroup 元 素 的 样式 之 外 的 所 有 样式 之 后 


第 二 , 不 规则 单元 格 被 计 入 其 起 始 列 。 从 表格 的 第 三 行 可 以 看 出 这 一 点 。 在 此 行 中 有 一 个 应 
用 了 第 一 种 样式 的 单元 格 扩展 到 了 由 男 一 个 colgroup 元 素 负责 的 区 域 。 
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最 后 要 说 的 是 ，colgroup 元 素 的 影响 范围 覆盖 了 列 中 所 有 的 单元 格 ， 包 括 那 些 位 于 thead 和 
tfoot 元 素 中 的 单元 格 , 不 管 它们 是 用 th 还 是 td 元 素 定 义 的 。colgroup 元 素 的 特别 之 处 就 在 于 它 影 
响 到 的 元 素 并 未 包含 在 其 内 部 。 因 此 该 元 素 无 法 用 做 更 具体 的 选择 器 的 基础 (如 #colgroup1 > td 
这 个 选择 器 不 会 有 任何 匹配 元 素 )。 
表示 个 别 的 列 

也 可 以 不 用 colgroup 元 素 的 span 属 性 , 改 用 col 元 素 指定 组 中 的 各 列 。 表 11-11 概 括 了 col 元 素 。 


表 11-11 ”col 元 素 
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TE col 

元 素 类 型 无 

允许 具有 的 父 元 素 colgroup 元 素 

局 部 属性 span 

内 容 无 

标签 用 法 虚 元 素 形式 

是 否 为 HTML5 新 增 fü 

在 HTML5 中 的 变化 align、width、char、charoff 和 valign 属 性 已 不 再 使 用 
习惯 样式 col { display: table-column; } 





使 用 col 元 素 的 好 处 在 于 能 够 获得 更 多 控制 权 。 有 了 它 ， 既 能 对 一 组 列 应 用 样式 ， 也 能 对 该 
组 中 个 别 的 列 应 用 样式 。col 元 素 位 于 colgroup 元 素 之 中 ， 每 个 col 元 素 代表 列 组 中 的 一 列 (未 使 
用 span 属 性 的 情况 )， 如 代码 清单 11-13 所 示 。 
代码 清单 11-13 ”使 用 col 元 素 


<!DOCTYPE HTML> 

















<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
thead th, tfoot th { text-align:left; background:grey; color:white} 
tbody th ( text-align:right; background: lightgrey; color:grey] 
[colspan], [rowspan] (font-weight:bold; border: medium solid black] 
thead [colspan], tfoot [colspan] {text-align:center; } 
caption {font-weight: bold; font-size: large; margin-bottom:5px] 
#colgroup1 (background-color: red} 
#col3 (background-color: green; font-size:small) 
«/style» 
«/head» 


«body» 
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<table> 
<caption>Results of the 2011 Fruit Survey</caption> 
«colgroup id-"colgroupi"» 
«col id-"coliAnd2" span-"2"/» 
«col id-"col3"/» 
</colgroup> 
<colgroup id="colgroup2" span="2"/> 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th> 
<th colspan="2">Size & Votes</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 


«th»2nd Favorite: </th><td>Oranges</td><td>Orange</td> 
<td>Large</td><td>450</td> 





«th»3rd Favorite: </th><td>Pomegranate</td> 

«td colspan-"2" rowspan="2"> 
Pomegranates and cherries can both come in a range of colors 
and sizes. 

</td> 

<td>203</td> 

</tr> 

<tr> 








<th rowspan="2">Joint 4th:</th> 
<td>Cherries</td> 
<td rowspan="2">75</td> 


<td>Pineapple</td> 
<td>Brown</td> 
td>Very Large</td> 





^ 


</tr> 

</tbody> 

<tfoot> 
<tr> 

<th colspan="5"> & copy; 2011 Adam Freeman Fruit Data Enterprises</th> 

</tr> 

</tfoot> 

</table> 
</body> 
</html> 


可 以 用 col 元 素 的 span 属 性 让 一 个 col 元 素 代表 几 列 。 不 用 span 属 性 的 col 元 素 只 代表 一 列 。 此 
例 分 别 为 一 个 colgroup 元 素 和 其 中 的 一 个 col 元 素 设 定 了 样式 。 其 效果 如 图 11-12 所 示 。 
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Results of the 2011 Fruit Survey 
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图 11-12 ”用 colgroup 和 col 元 素 将 样式 应 用 到 表格 上 





























11.8 ”设置 表格 边框 


table 元 素 定 义 了 border 属 性 ,使 用 这 个 属性 就 是 告诉 浏览 器 这 个 表格 是 用 来 表示 表格 式 数 据 
而 不 是 用 来 布置 其 他 元 素 的 。 大 多 数 浏 览 器 见 到 border 属 性 后 会 在 表格 和 每 个 单元 格 周围 绘 出 边 
框 。 代 码 清单 11-14 示 范 了 border 属 性 的 用 法 。 


代码 清单 11-14 ”使 用 border 属 性 


<!DOCTYPE HTML> 





























<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content="A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
</head> 
<body> 


<table border="1"> 
<caption>Results of the 2011 Fruit Survey</caption> 
<colgroup id="colgroup1"> 
«col id-"coliAnd2" span="2"/> 
«col id-"col3"/» 
</colgroup> 
«colgroup id-"colgroup2" span="2"/> 
«thead» 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th> 
<th colspan="2">Size & Votes</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 
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</tr> 
<tr> 
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td> 
<td>Large</td><td>450</td> 
</tr> 
<tr> 
«th»3rd Favorite:</th><td>Pomegranate</td> 
<td colspan="2" rowspan="2"> 
Pomegranates and cherries can both come in a range of colors 
and sizes. 
</td> 
<td>203</td> 
</tr> 
<tr> 
<th rowspan="2">Joint 4th:</th> 
<td>Cherries</td> 
<td rowspan="2">75</td> 
</tr> 
<tr> 
<td>Pineapple</td> 
<td>Brown</td> 
<td>Very Large</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<th colspan="5"> & copy; 2011 Adam Freeman Fruit Data Enterprises</th> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


border 属 性 的 值 必 须 设置 为 1 或 空 字符 串 ("" )。 该 属性 并 不 控制 边框 的 样式 ， 那 是 CSS 的 工 
作 。 图 11-13 显 示 了 带 porder 属 性 的 表格 在 Chrome 中 的 显示 结果 ( 注意 此 例 删 除了 style 元 素 以 便 
强调 border 属 性 的 效果 )。 
= Leks 
j By Example x VN | 
€ Œ | Q titan/listings/example.html XA 


Results of the 2011 Fruit Survey 

Rank Name Color Size & Votes 
[ Favorite: [Apples —— |Green [Medium — — [5o 
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Pineapple ||Brown ery Large | 
[2011 Adam Freeman Fruit Data Enterprises |] 


















































































[Pomegranates and cherries can both come in a range of colors and sizes. J 
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图 11-13 ”table 元 素 设 置 了 border 属 性 后 的 效果 
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浏览 器 显示 的 默认 边框 并 不 美观 ， 所 以 使 用 border 属 性 之 后 通常 还 要 用 到 CSS 。 


提示 








不 设置 表格 的 border 属 性 也 能 用 CSS 为 其 定义 边框 。 不过， 如 果 没 有 border 属 性 ， 那 么 浏 
览 器 可 能 会 认为 表格 是 用 于 处 理 布 局 事宜 的 ， 因 此 其 显示 表格 的 方式 可 能 会 跟 预想 的 不 
一 样 。 在 撰写 本 书 时 ,主流 浏览 器 除了 会 显示 默认 边框 之 外 对 于 border 属 性 关注 不 多 ， 
但 是 以 后 可 能 会 有 一 些 改变 。 


尽管 border 属 性 会 让 浏览 器 为 表格 和 每 个 单元 格 添加 边框 ， 作 者 还 是 需要 用 CSS 选 择 器 分 别 
针对 各 种 元 素 重 设 边 框 样式 。 在 设计 CSS 选 择 需 时 可 用 的 办 法 很 多 : 表格 的 外 边框 可 以 通过 table 


元 素 控制 ; 表 头 、 表 格 主体 和 表 脚 可 以 分 别 通过 thead 、tbody 和 tfoot 元 素 控制 ; 列 可 以 通过 




















colgroup 和 col 元 素 控制 ; 各 个 单元 格 可 以 通过 th 和 td 元 素 控 制 。 而 且 ， 就 算 别 的 办 法 都 不 管用 ， 
至 少 还 可 以 使 用 全 局 属性 id 和 class 确 定 目 标 。 


11.9 











小 结 

















本 章 介 绍 了 HTML5 对 表格 的 支持 。HTML5 在 这 方面 最 大 的 变化 是 表格 再 也 不 能 用 来 处 理 页 


面 布 局 了 





这 个 事情 必须 依靠 CSS 的 相关 功能 来 做 ( 见 第 21 章 )。 除 了 这 个 限制 ， 表 格 可 以 算 





得 上 相当 灵活 ， 其 样式 设置 起 来 也 很 方便 ， 用 起 来 称心 如 意 。 
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表单 是 HTML 中 获取 用 户 输入 的 手段 。 它 对 于 Web 应 用 系统 极其 重要 ， 然 而 HTML 定 义 的 功 
能 落后 于 表单 的 使 用 方式 已 有 多 年 。 在 HTMLS 中 ， 整 个 表单 系统 已 经 彻底 改造 过 ， 面 貌 焕然 一 
新 ， 标 准 的 步伐 已 经 跟 上 了 表单 的 应 用 实践 。 




















本 章 介绍 的 是 HTML 表 单 的 基础 知识 。 从 定义 一 个 非常 简单 的 表单 开始 ， 
| 表单 工作 的 方式 。 我 编写 了 一 段 Nodejs 脚 本 。 读 者 可 以 用 它 测 试 表 单 ， 观 察 浏 








—- 
^E 














AH 





览 器 发 送 给 服务 器 的 数据 。 高 级 的 表单 特性 将 放 在 下 一 章 介 绍 。 其 中 包括 从 用 户 
据 的 新 方法 以 及 在 浏览 器 中 检查 数据 的 能 力 这 样 一 些 最 引 人 注 目的 HTIML5 新 变化 。 除 了 这 些 重 
要 改进 外 ， 还 有 许多 其 他 变化 也 值得 关注 。 本 章 和 下 一 章 都 值得 读 考 重视。 


在 撰写 本 书 时 ， 主 流 浏览 右 对 HTML5 表 单 的 支持 已 经 很 不 错 ， 但 是 还 算 不 上 完美 。 要 想 使 








过 对 它 的 扩充 演 





收集 特定 类 型 数 





















































































































































用 某 项 表单 特性 ， 应 该 事先 检查 一 下 它 是 否 已 经 得 到 广泛 支持 。 表 12-1 概 括 了 本 章 内 容 。 
表 12-1 ”本章 内 容 概要 
B m 解决 方案 代码 清单 [72 
制作 基本 的 表单 使 用 forzm、jinput 和 button 元 素 12-1 
指定 表单 数据 发 送 到 的 URL 更 用 form 元 素 的 action 属 性 ( 或 button 元 素 的 formaction 12-3 (和 12-15 ) 
属性 ) 
指定 传送 给 服务 器 的 表单 数据 采用 的 ”使 用 form 元 素 的 enctype 属 性 (或 button 元 素 的 formen- 12-4 (和 12-15 ) 
编码 方式 ctype 属 性 ) 
空 制 自动 完成 功能 使 用 form 元 素 或 input 元 素 的 autocomplete 属 性 12-5、12-6 
为 服务 器 的 反馈 信息 指定 显示 位 置 更 用 form 元 素 的 target 属 性 ( 或 button 元 素 的 formtarget 12-7 
属性 ) 
指定 表单 的 名 字 使 用 form 元 素 的 name 属 性 12-8 
为 input 元 素 添加 说 明 标签 使 用 label 元 素 12-9 
载 入 表单 后 自动 聚焦 于 某 input 元 素 使 用 input 元 素 的 autofocus 属 性 12-10 
禁用 单个 input 元 素 使 用 input 元 素 的 disabled 属 性 12-11 
对 input 元 素 编组 使 用 fieldset 元 素 12-12 
为 fieldset 元 素 添 加 说 明 标 签 使 用 legend 元 素 12-13 
禁用 一 组 input 元 素 使 用 fieldset 元 素 的 disabled 属 性 12-14 






















































































(EE) 
问 题 解决 方案 代码 清单 
jbutton 元 素 提 交 表 单 将 button 元 素 的 type 属 性 值 设置 为 submit 12-15 
jbutton 元 素 重 置 表单 将 button 元 素 的 type 属 性 值 设 置 为 reset 12-16 
jbutton 元 素 表 示 一 般 的 按钮 控件 将 button 元 素 的 type 属 性 值 设置 为 button 12-17 
将 与 表单 相关 的 元 素 与 并 非 其 祖先 元 素 ”使 用 form 属 性 12-18 
的 form 元 素 挂钩 





12.1 制作 基本 表单 


制作 一 个 基本 的 表单 需要 三 个 元 素 : form、input 和 button 元 素 。 代 码 清单 12-1 展 示 了 一 个 含 
有 简单 表单 的 HTML 文 档 。 


代码 清单 12-1 一 个 简单 的 HTMI 表 单 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form method="post" action-"http://titan:8080/form"» 
«input name-"fave"/» 
«button»Submit Vote«/button» 
</form> 
</body> 
</html> 


其 显示 效果 如 图 12-1 所 示 。 


£ 








ca 
加 Example 
€ > QC | O titan/listings/example.htm wif 
Submit Vote 
is d 








图 12-1 显示 在 浏览 器 中 的 一 个 简单 表单 


这 个 表单 实在 太 简 单 了 , 没有 多 少 用 处 。 不 过 在 认识 了 那 三 个 核心 元 素 之 后 , 读者 就 能 够 对 
表单 进行 扩充 ， 让 它 变 得 更 有 意义 、 更 有 用 处 。 
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12.1.1 定义 表单 
先 从 form 元 素 讲 起 ， 该 元 素 表 示 HTML 页 面 上 的 表单 。 表 12-2 概 括 了 form 元 素 。 

















4312-2 form 元 素 


























元 素 form 

元 素 类 型 流 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 流 元 素 的 元 素 。 但 form 元 素 不 能 是 其 他 form 元 素 的 后 代 元 素 

局 部 属性 action, method, enctype, name, accept-charset, 、novalidate 、target 和 autocomplete 
内 容 WAR (但 主要 是 1abel 元 素 和 input 元 素 ) 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 T 

在 HTML5 中 的 变化 novalidate 和 autocomplete 属 性 是 HTML5 中 新 增 的 

习惯 样式 form { display: block; margin-top: Oem; } 














本 章 稍 后 会 回头 说 明 如 何 用 属性 对 form 元 素 进行 配置 。 目 前 只 要 知道 form 元 素 告诉 浏览 需 它 
处 理 的 是 HTML 表 单 就 行 了 。 

第 二 种 关键 元 素 是 input ， 其 用 途 是 收集 用 户 输入 数据 。 从 图 12-1 可 以 看 到 ， 那 个 input 元 素 
在 浏览 器 中 显示 为 一 个 简单 的 文本 框 。 用户 就 在 这 个 文本 框 中 输入 内 容 。 这 是 最 基本 的 一 种 input 
元 素 。 后 面 会 介绍 收集 用 户 输入 数据 的 多 种 选择 ( 包括 HTML5 中 新 增 的 一 些 很 棒 的 特性 )， 这 些 
东西 放 到 第 13 章 再 讲 。 表 12-3 概 括 了 ;input 元 素 。 


表 12-3 :input 元 素 





































































































元 素 input 

元 素 类 型 短语 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 短语 元 素 的 元 素 

局 部 属性 name 、disabled、form、type， 以 及 取决 于 type 属 性 值 的 其 他 一 些 属性 

内 容 无 

标签 用 法 虚 元 素 形式 

是 否 为 HTML5 新 增 否 ,， 但 是 增加 了 一 些 新 的 input 元 素 类 型 ， 它 们 由 type 属 性 确定 ( 详 见 第 13 章 ) 

在 HTML5 中 的 变化 在 HTML5 中 type 属 性 有 一 些 新 的 值 。 此 外 还 添加 了 一 些 新 的 属性 ， 它们 需要 与 type 属 性 的 
































特定 值 搭 配 使 用 
习惯 样式 无 。 这 种 元 素 的 外 观 取决 于 type 属 性 





























input 元 素 的 属性 多 达 29 个 ， 具 体 有 哪些 可 用 取决 于 type 属 性 的 值 。 第 13 章 说 明 收集 用 户 输 
入 数据 的 各 种 方法 时 将 会 介绍 这 些 属性 及 其 用 法 。 














提示 除了 input 元 素 ， 还 有 其 他 一 些 元 素 可 以 用 来 收集 用 户 输入 的 数据 。 详 见 第 14 章 。 





前 面 的 例子 中 要 讲 的 最 后 一 个 元 素 是 button。 用 户 需 要 有 一 种 方法 告诉 浏览 器 : 所 有 数据 已 
经 输入 完毕 ,该 把 它们 发 给 服务 器 了 。 这 个 事情 多 半 是 用 button 元 素来 做 (不 过 还 有 一 些 其 他 办 
法 可 用 ， 详 见 第 13 章 )。 表 12-4 概 括 了 button 元 素 。 


表 12-4 button 元素 









































元 素 button 

元 素 类 型 短语 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 短语 元 素 的 元 素 

局 部 属性 name 、disabled、form、type、value、autofocus， 以 及 取决 于 type 属 性 值 的 其 他 一 些 属性 
内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 ff 























在 HTML5 中 的 变化 新 增 了 一 些 属性 ， 具 体 有 哪些 可 用 取决 于 type 属 性 值 ， 详 见 12.7 节 
习惯 样式 无 





button 元 素 有 多 种 用 途 ， 这 方面 的 介绍 见 12.7 节 。 该 元 素 用 在 form 元 素 中 且 没 有 设置 任何 
性 时 ， 其 作用 是 告诉 浏览 器 把 用 户 输入 的 数据 提交 给 服务 名。 


12.1.2 ”查看 表单 数据 


本 章 的 示例 需要 有 一 个 接收 浏览 器 发 送 的 数据 的 服务 器 。 为 此 我 编写 了 一 段 简单 的 Node.js 
脚本 程序 ( 第 2 章 介绍 过 如 何 获 取 和 设置 Nodejs )， 它 会 生成 一 个 HTML 页面， 其 中 包含 表单 从 用 
户 收 集 的 数据 。 代 码 清单 12-2 展 示 了 这 个 脚本 的 内 容 。 第 2 章 说 过 ， 本 书 不 打算 深入 讲解 服务 器 
端 脚 本 。 不 过 ， 由 于 Node.js 是 基于 JavaScript 的 ， 所 以 读者 借助 第 5 章 中 对 JavaScript 语 言 特性 的 说 
明和 http://nodejs.org 这 个 网 站 上 的 说 明文 档 ， 要 看 懂 脚 本 的 用 途 很 容易 。 


代码 清单 12-2 ”脚本 文件 formecho.js 


var http = require('http'); 
var querystring = require('querystring'); 





Hl 








http.createServer(function (req, res) { 
switch(req.url) { 
case '/form': 
if (req.method -- 'POST') ( 
console.log("[200] " + req.method + " to " + req.url); 
var fullBody = ''; 
req.on('data', function(chunk) { 
fullBody += chunk. toString(); 
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35 
req.on('end', function() ( 
res.writeHead(200, "OK", ('Content-Type': 'text/html']); 
res.write('«html»«head»«title»Post data«/title»«/head»«body»'); 
‘<style>th, td {text-align:left; padding:5px; color:black}\n'); 
‘th {background-color:grey; color:white; min-width:10em}\n'); 
‘td {background-color:lightgrey}\n'); 
caption {font-weight :bold}</style>'); 
«table border="1"><caption>Form Data«/caption»'); 
res.write('«tr»«th»Name«/th»«th»Value«/th»'); 
var dBody - querystring.parse(fullBody); 
for (var prop in dBody) { 
res.write("«tr»«td»" + prop + "</td><td>" + dBody[prop] + "</td></tr>"); 
} 


res.write('«/table»«/body»«/html»'); 
res.end(); 
35 
} else { 
console. log("[405] " + req.method + " to " + req.url); 
res.writeHead(405, "Method not supported", {'Content-Type': 'text/html']); 
res.end('«html»«head»«title»405 - Method not supported«/title»«/head»«body»' + 
'«hi»Method not supported.«/h1»«/body»«/html»'); 
} 


break; 
default: 
res.writeHead(404, "Not found", ('Content-Type': 'text/html']); 
res.end('«html»«head»«title»404 - Not found«/title»«/head»«body»' 4 
'«hi»Not found.«/hi»«/body»«/html»'); 
console.log("[404] " + req.method + " to " + req.url); 


te( 
ite( 
res.write( 
ite( 
ite( 

( 














TN 

这 个 脚本 将 浏览 器 发 来 的 数据 汇总 并 返回 一 个 简单 的 HTML 文 档 ,在 文档 中 以 HTML 表 格 ( 见 
第 11 章 ) 的 形式 将 那些 数据 显示 出 来 。 它 在 8080 端 口 监听 浏览 器 的 连接 请 求 , 并且 只 处 理 浏览 
用 HTTP POST 方法 发 送 到 /form 这 个 URL 的 表单 数据 。 本 章 稍 后 介绍 form 元 素 支 持 的 属性 时 会 说 
明 8080 端 口 和 /form 这 个 URL 的 含义 。 这 个 脚本 保存 在 一 个 名 为 formechojjs 的 文件 中 。 要 运行 这 个 
脚本 程序 ， 可 在 titan 服 务 器 上 打开 一 个 命令 窗口 并 输入 如 下 命令 : 

















bin\node.exe formecho.js 























titan 服 务 器 运行 的 操作 系统 是 Windows Server 2008 R2。 读 者 如 果 使 用 其 他 操作 系统 的 话 , 用 
来 启动 Node.js 的 命令 会 有 所 不 同 。 在 示例 表单 的 文本 框 中 输入 Apples 然 后 按 下 Submit Vote 按 钮 提 
交 表 单 ， 服 务 器 端 脚 本 的 输出 内 容 在 浏览 器 中 显示 的 结果 如 图 12-2 所 示 。 

结果 中 只 有 一 项 数据 ， 这 是 因为 在 示例 表单 中 只 有 一 个 input 元 素 。 表 格 的 Name 列 中 显示 的 
值 为 fave， 它 正 是 为 input 元 素 的 name 属 性 设置 的 值 。 表 格 的 Value 列 中 显示 的 值 为 Apples， 它 正 
是 按 下 Submit Vote 按 钮 之 前 在 文本 框 中 输入 的 内 容 。 后 面 制作 更 复杂 的 表单 时 , Node.js 脚 本 的 输 
出 信息 都 将 以 表格 形式 显示 。 
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| Form Data 






































图 12-2 ”用 Node.js 查 看 浏览 器 提交 的 表单 数据 











12.2 ”配置 表单 

前 面 已 经 制作 过 一 个 包含 简单 表单 的 HTML 文档 ， 并 用 Node.js 显 示 了 发 送 给 服务 器 的 数据 。 
现在 该 介绍 一 下 可 用 于 表单 及 其 内 容 的 各 种 基本 配置 选项 了 。 
12.2.1 配置 表单 的 action 属性 


action 属 性 说 明了 提交 表单 时 浏览 器 应 该 把 从 用 户 收集 的 数据 发 送 到 什么 地 方 。 我 想 把 数据 
提交 给 自己 编写 的 Node.js 脚 本 处 理 ， 所 以 要 把 表单 发 至 开发 服务 器 titan 上 位 于 8080 端 口 的 /form 
这 个 URL。 代 码 清单 12-1 中 的 表单 已 经 这 样 做 了 : 














<form method="post" action-"http://titan:8080/form"» 


如 果 不 设 置 form 元 素 的 action 属 性 ， 那 么 浏览 器 会 将 表单 数据 发 到 用 以 加 载 该 HTML 文档 的 
URL。 这 看 似 毫 无 意义 ， 其 实 不 然 ， 好 几 个 流行 的 Web 应 用 系统 开发 框架 都 依赖 于 这 个 特性 。 

如 果 为 action 属 性 指定 的 是 一 个 相对 URL， 那么 该 值 会 被 嫁接 在 当前 页 的 URL ( 如 果 使 用 了 
第 7 章 介绍 过 的 base 元 素 ， 则 是 该 元 素 的 href 属 性 值 ) 的 后 面 。 代 码 清单 12-3 示 范 了 如 何 用 base 
元 素 设置 表单 数据 的 发 送 目的 地 。 


代码 清单 12-3 ”使 用 base 元 素 设 置 表单 数据 的 发 送 目 的 地 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«base href="http://titan:8080"/> 
«/head» 
«body» 
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<form method="post" action="/form"> 
<input name="fave"/> 
<button>Submit Vote</button> 
</form> 
</body> 
</html> 


警告 “base 元 素 将 影响 HTML 文 档 中 所 有 的 相对 UREL， 而 不 只 是 form 元 素 。 


12.2.2 配置 HTTP 方法 属性 


method 属 性 指定 了 用 来 将 表单 数据 发 送 到 服务 器 的 HTTP 方法 。 人 允许 的 值 有 get 和 post 这 两 个 ， 
它们 分 别 对 应 于 HTTP 的 GET 和 P0ST 方 法 。 未 设置 method 属 性 时 使 用 的 默认 值 为 get。 这 有 点 令 人 遗 
憾 ， 因 为 大 多 数 表单 都 需要 用 HTTP P0ST 方 法。 前 面 的 例子 中 为 表单 指定 的 正 是 post 这 个 值 : 











<form method-"post" action-"http://titan:8080/form"» 











GET 请 求 用 于 安全 交互 (safe interaction ), 同一 个 请 求 可 以 发 起 任意 多 次 而 不 会 产生 额外 作用 。 
POST 请 求 则 用 于 不 安全 交互 ， 提 交 数 据 的 行为 会 导致 一 些 状态 的 改变 。 对 于 Web 应 用 程序 多 半 采 
用 后 一 种 方式 。 这 些 规矩 是 W3C ( World Wide Web Consortium, 万 维 网 联盟 ) 定 的 ， 参 
www.w3.org/Provider/Style/URI, 

一 般 而 言 ，GET 请 求 应 该 用 于 获取 只 读 信息 ， 而 P0ST 请 求 则 应 该 用 于 会 改变 应 用 程序 状态 
的 各 种 操作 。 使 用 恰当 的 请 求 很 重要 。 如 果 拿 不 准 该 用 哪个 ， 宁 可 谨慎 一 点 ， 就 用 P0ST 方 法 
好 了 。 
































提示 “本 章 使 用 的 Node.js 脚 本 只 响应 POST 请 求 。 


12.2.3 配置 数据 编码 


enctype 属 性 指定 了 浏览 器 对 发 送 给 服务 器 的 数据 采用 的 编码 方式 。 该 属性 可 用 的 值 有 三 个 ， 
如 表 12-5 所 示 。 





表 12-5 ”enctype 属 性 允许 的 值 




















{fi CENE 
application/x-waw-form-urlencoded — 这 是 未 设置 enctype 届 性 时 使 用 的 默认 编码 方式 。 它 不 能 用 来 将 文件 上 传 到 服务 咒 
multipart/form-data 该 编码 方式 用 于 将 文件 上 传 到 服务 器 


























text/plain 该 编码 方式 因 浏览 器 而 异 ， 详 见 下 面 的 说 明 
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为 了 搞 清 这 些 编码 方式 的 工作 机 制 , 需要 先 在 表单 中 再 添加 一 个 input 元 素 , 如 代码 清单 12-4 
所 示 。 


代码 清单 12-4 ”在 表单 中 添加 一 个 input 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«input name-"fave"/» 
<input name="name"/> 
<button>Submit Vote</button> 
</form> 
</body> 
</html> 


添加 第 二 个 input 元 素 是 为 了 从 用 户 那里 收集 两 项 数据 。 读 者 可 能 已 经 看 出 , 这 里 要 设计 的 表单 
是 用 来 让 用 户 为 自己 喜欢 的 水 果 投 票 的 。 新 增 的 input 元 素 用 来 获取 用 户 的 姓名 。 从 代码 清单 中 可 以 
看 到 ， 该 元 素 的 name 属 性 的 值 被 设置 成 了 name。 为 演示 各 种 表单 编码 方式 的 效果 ， 实 验 中 将 把 表单 
的 enctype 属 性 分 别 设置 为 每 一 种 可 用 的 编码 类 型 。 每 一 次 在 文本 框 中 输入 的 数据 都 是 相同 的 。 第 一 
个 文本 框 中 输入 的 是 Apples , 第 二 个 文本 框 中 输入 的 是 Adam Freeman 姓氏 和 名 字 之 间 有 一 个 空格 )。 

1. application/x-www-form-urlencoded 编 码 

这 是 默认 的 编码 方式 ， 除 了 不 能 用 来 上 传 文件 到 服务 器 外 , 它 适 用 于 各 种 类 型 的 表单 。 每 项 
数据 的 名 称 和 值 都 与 URL 采 用 同样 的 编码 方案 ( 这 是 该 编码 方式 名 称 中 urlencoded 这 个 部 分 的 由 
来 )。 示 例 表 单 的 数据 采用 这 种 编码 后 的 结果 如 下 : 









































fave=Apples&name=Adam+Freeman 


其 中 的 特殊 字符 已 经 替换 成 了 对 应 的 HTML 实 体 。 数 据 项 的 名 称 和 值 以 等 号 (= ) T. 各 
组 数据 项 间 则 以 符号 & 分 开 。 

2. multipart/form-data 编 码 

multipart/form-data 编 码 走 的 是 另 一 条 路 子 。 它 更 为 元 长 ， 处 理 起 来 更 加 复杂 。 这 也 是 它 一 般 
只 用 于 需要 上 传 文件 到 服务 器 的 表单 的 原因 一 一 这 个 任务 用 默认 编码 方式 无 法 办 到 。 示例 表单 的 
数据 采用 这 种 编码 方式 的 结果 如 下 : 





------ WebKit FormBoundary2qgCsuH4ohZ5e0bF 
Content-Disposition: form-data; name="fave" 


Apples 
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------ ebKitFormBoundary2qgCsuH4ohZ5eObF 
Content-Disposition: form-data; name-"name" 
Adam Freeman 


------ ebKitFormBoundary2qgCsuH4ohZ5e0bF - - 





fave=Apple 


name=Adam Freeman 


3. text/plain 编 码 

这 种 编码 要 谨慎 使 用 。 对 于 在 这 种 方案 中 数据 应 该 如 何 编 码 并 没有 正式 的 规范 ,主流 浏览 
各 有 各 的 数据 编码 方法 。 例 如 ，Chrome 使 用 与 application/x-www-form-urlencoded 方 案 一 样 的 数据 
编码 方法 ， 而 Firefox 则 将 数据 编码 成 如 下 形式 : 












































fave=Apple 


name=Adam Freeman 





在 这 个 结果 中 , 每 个 数据 项 占据 一 行 , 特殊 字符 并 未 进行 编码 。 建议 不 要 使 用 这 种 编码 方案 ， 
各 种 浏览 器 实现 它 的 方式 各 不 相同 ， 因 此 其 结果 难以 预料 。 


12.2.4 ”控制 表单 的 自动 完成 功能 


浏览 器 可 以 记 住 用 户 输入 表单 的 数据 , 并 在 再 次 遇 到 类 似 表单 的 时 候 自动 使 用 这 些 数据 帮 用 
户 填写 。 这 种 技术 可 以 让 用 户 免 于 反复 输入 同样 的 数据 之 苦 。 这 方面 的 一 个 典型 例子 是 用 户 在 线 
购买 商品 或 服务 的 时 候 输入 的 姓名 和 送 货 信息 。 每 个 网 站 都 有 自己 的 购物 车 和 注册 程序 , 但 是 浏 
览 器 可 以 使 用 用 户 在 其 他 表单 中 输入 过 的 数据 加 快 结账 过 程 。 用 以 判断 哪些 数据 可 以 重复 使 用 的 
技术 因 浏览 器 而 异 ， 不 过 一 种 常用 的 方法 是 查看 input 元 素 的 name 属 性 。 

一 般 来 说 ,表单 的 自动 完成 功能 有 益 于 用 户 ， 对 Web 应 用 系统 也 有 一 点 帮助 。 不 过 有 时 网 页 
作者 并 不 想 让 浏览 器 自动 填写 表单 。 代 码 清单 12-5 示 范 了 如 何 使 用 form 元 素 的 autocomplete 属 性 
达到 这 个 目的 。 


代码 清单 12-5 ”将 form 元 素 的 autocomplete 属 性 设置 为 禁用 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 







































































<body> 


«form autocomplete="off" method="post" action-"http://titan:8080/form"» 
<input name="fave"/> 
<input name="name"/> 
<button>Submit Vote</button> 


</form> 
</body> 
</html> 











autocomplete 属 性 允许 的 值 有 两 个 : on 和 off。 如 果 不 设 置 这 个 属性 的 话 ， 其 默认 值 为 on， 表 


示人 允许 浏览 带 填 写 表单 。 








input 元 素 也 有 autocomplete 属 








代码 清单 12-6 设置 input 元 素 的 autocomplete 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 


<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«/head» 
«body» 


生 ， 可 以 用 于 单个 元 素 的 自动 完成 功能 ， 如 代码 清单 12-6 所 示 。 





<form autocomplete-"off" method="post" action-"http://titan:8080/form"» 
<input autocomplete-"on" name="fave"/> 
<input name="name"/> 
<button>Submit Vote</button> 


</form> 
</body> 
</html> 























form 元 素 的 autocomplete 属 性 设置 的 是 表单 中 的 input 元 素 默认 的 行为 方式 。 而 各 个 input 元 素 

















在 该 属性 上 的 设置 可 以 覆盖 这 个 


著 认 行为 方式 。 上 面 的 代码 清 让 





正 是 这 样 做 的 。 此 例 在 form 元 素 








上 禁用 了 自动 完成 功能 , 但 在 第 一 个 input 元 素 上 一 一 仅仅 是 在 这 个 元 素 上 , 又 重新 开启 了 该 功能 。 


至 于 第 二 个 input 元 素 ， 因 为 没有 设置 autocomplete 属 性 ， 所 以 采用 的 是 form 层 面 的 设置 。 
一 般 来 说 , 最 好 让 自动 完成 功能 保持 开启 状态 。 H 














有 户 习 惯 让 浏览 器 自动 填写 表单 ,而 且 在 网 


上 办 理 任何 一 种 业务 时 往往 都 会 用 到 好 几 个 表单 。 关 闭 这 个 功能 干涉 了 用 户 的 偏好 和 工作 习惯 。 
根据 我 自己 的 体会 , 在 禁用 了 自动 完成 功能 的 网 站 上 购物 有 点 折磨 人 , 尤其 是 需要 在 表单 中 填写 
姓名 和 地 址 等 非常 基本 的 信息 的 时 候 。 有些 网 站 对 信用 卡 数据 禁用 自动 完成 功能 , 这 个 更 有 意义 
一 点 。 不 过 即便 如 此 ， 这 种 做 法 也 要 谨慎 使 用 ， 要 充分 考虑 各 种 理由 。 


12.2.5 ”指定 表单 反馈 信息 











元 素 的 target 属 性 予以 改变 。 该 
表 12-6 所 示 。 





的 目标 显示 位 置 





= 























默认 情况 下 浏览 器 会 用 提交 表单 后 服务 器 反馈 的 信息 替换 表单 所 在 的 原 页 面 。 这 可 以 用 fornm 











遇 性 的 工作 机 制 与 3 元 素 的 target 属 性 一 样 。 可 供 选 择 的 目标 如 
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#212-6 ”form 元素 的 target 属 性 值 






























































{fi LEE: 
-blak 将 浏览 器 反馈 信息 显示 在 新 窗口 (或 标签 页 ) 中 
-parent 将 浏览 器 反馈 信息 显示 在 父 窗 框 组 中 
-self 将 浏览 器 反馈 信息 显示 在 当前 窗口 中 (这 是 默认 行为 ) 
-top 将 浏览 器 反馈 信息 显示 在 顶层 窗口 中 
adl 将 浏览 器 反馈 信息 显示 在 指定 窗 框 中 








这 些 值 每 一 个 都 代表 着 一 种 浏览 环境 。 blank 和 _self 这 两 个 值 不 言 而 喻 。 其 他 值 则 与 窗 框 
的 使 用 相关 ， 放 在 第 15 章 讲 。 代 码 清单 12-7 示 范 了 如 何 设置 form 元 素 的 target 属 性 。 








代码 清单 12-7 使 用 target 属 性 


«IDOCTYPE HTML» 


«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form target-" blank" method-"post" action-"http://titan:8080/form"» 
«input autocomplete-"on" name-"fave"/» 
«input name-"name"/» 
«button»Submit Vote«/button» 
«/form» 
</body> 
</html> 














此 例 将 target 设 置 为 blank， 让 浏览 器 将 服务 器 的 反馈 信息 显示 在 新 窗口 或 标签 页 中 。 这 个 
修改 的 效果 如 图 12-3 所 示 。 
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图 12-3 ”在 新 标签 页 中 显示 服务 器 反馈 信息 











1226 ”设置 表单 名 称 

name 属 性 可 以 用 来 为 表单 设置 一 个 独一无二 的 标识 符 ， 以 便 使 用 DOM ( Document Object 
Model， 文 档 对 象 模 型 ) 时 区 分 各 个 表单 (DOM 放 在 第 25 章 介绍 )。name 属 性 与 全 局 属性 id 不 是 
一 回 事 。 后 者 在 HTML 文 档 中 多 半 用 于 CSS 选 择 器 。 代 码 清单 12-8 展 示 的 是 一 个 设置 了 name 属 性 
和 id 属 性 的 form 元 素 。 简 单 起 见 ， 例 中 这 两 个 属性 使 用 了 同样 的 值 。 
代码 清单 12-8 ”使 用 form 元 素 的 name 属 性 和 id 属 性 


<!DOCTYPE HTML> 












































<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form name-"fruitvote" id-"fruitvote" 
method="post" action="http://titan:8080/form" > 
<input name="fave"/> 
<input name="name"/> 
<button>Submit Vote</button> 
</form> 
</body> 
</html> 





提交 表单 时 其 name 属 性 值 不 会 被 发 送 给 服务 器 ,所 以 该 属性 的 用 处 仅 限 于 DOM 中 ,不 像 input 
元 素 的 同名 属性 那么 重要 。 要 是 input 元 素 不 设置 name 属 性 ， 那 么 用 户 在 其 中 输入 的 数据 在 提交 
表单 时 不 会 被 发 送 给 服务 器 。 


12.3 ”在 表单 中 添加 说 明 标 签 


现在 已 经 有 了 一 个 用 来 收集 用 户 输入 数据 的 表单 , 但 是 它 用 起 来 有 点 不 方便 。 上 一 节 中 添加 
了 第 二 个 input 元 素 之 后 表单 的 样子 如 图 12-4 所 示 。 
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图 12-4 ”示例 表单 
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这 个 表单 明显 缺乏 给 用 户 看 的 指示 信息 。 谁 会 通过 阅读 HTML 源 代码 来 搞 清 每 个 文本 框 的 用 
途 呢 ? 这 个 缺点 可 以 用 label 元 素 弥 补 , 该 元 素 的 用 途 是 为 表单 中 的 每 一 个 元 素 提 供 说 明 。 表 12-7 
概括 了 1abel 元 素 。 























表 12-7 1abel 元 素 












































元 素 label 

元 素 类 型 短语 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 短语 元 素 的 元 素 

局 部 属性 for, form 

内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 否 

在 HTML5 中 的 变化 form 属 性 是 HTML5 中 新 增 的 ， 详 见 12.8 节 
习惯 样式 label { cursor: default; } 











代码 清单 12-9 示 范 了 如 何 提供 这 种 说 明 信 息 。 
代码 清单 12-9 使 用 1abel 元 素 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
«p»«label for="fave">Fruit: <input id-"fave" name="fave"/></label></p> 
<p><label for="name">Name: <input id="name" name="name"/></label></p> 
<button>Submit Vote</button> 
</form> 
</body> 
</html> 


此 例 为 每 个 input 元 素 都 配 了 一 个 labe1 元 素 。 注 意 ， 例 中 为 input 元 素 设置 了 id 属性 ， 并 
将 相关 label 元 素 的 for 属 性 设置 为 这 个 id 值 。 这 样 做 即 可 将 input 元 素 和 1abel 元 素 关 联 起 来 ， 
有 助 于 屏幕 阅读 器 和 其 他 残障 辅助 技术 对 表单 的 处 理 。 这 些 说 明 标签 的 显示 结果 如 图 12-5 
所 示 。 

上 面 的 代码 清单 把 input 元 素 作为 label 元 素 的 内 容 放置 在 其 中 。 这 个 不 是 强制 性 的 要 求 ， 二 
者 可 以 独立 定义 。 在 设计 复杂 表单 的 时 候 ，l1abel 元 素 独立 于 input 元 素 定 义 是 很 常见 的 事 。 
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j By Example Ww 
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| Fruit: 
Name: 


图 12-5 ”为 表单 添加 说 明 标 签 














提示 ”此 例 在 表单 中 添加 了 一 些 p 元 素 ， 以 便 简单 地 设置 一 下 表单 的 布局 。 本章 大 多 数 例子 都 会 
如 法 炮制 。 这 样 做 更 方便 读者 观察 在 HTML 文 档 中 新 添加 的 部 分 对 呈现 结果 的 影响 。 要 
想得到 更 美观 的 表单 ， 需 要 用 到 CSS 的 表格 特性 〈 见 第 21 章 )。 关 于 p 元 素 ， 参 见 第 9 章 。 


12.4 自动 聚焦 到 某 个 input 元 素 


设计 者 可 以 让 表单 显示 出 来 的 时 候 即 聚焦 于 某 个 input 元 素 。 这 样 用 户 就 能 直接 在 其 中 输入 
数据 而 不 必 先 动手 选择 它 。autofocus 属 性 的 用 途 就 是 指定 这 种 元 素 ， 如 代码 清单 12-10 所 示 。 








代码 清单 12-10 ”使 用 autofocus 属 性 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«p» 
«label for="fave">Fruit: <input autofocus id-"fave" name="fave"/></label> 
</p> 
«p»«label for="name">Name: <input id="name" name="name"/></label></p> 
<button>Submit Vote</button> 
</form> 
</body> 


</html> 
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浏览 器 将 这 个 页 面 一 显示 出 来 就 会 聚焦 于 第 一 个 输 和 元素。 图 12-6 显 示 了 Chrome 用 以 标示 位 
于 焦点 上 的 那个 元 素 的 视觉 信号 。 
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图 12-6 “自动 聚焦 于 一 个 input 元 素 


autofocus 属 性 只 能 用 在 一 个 input 元 素 上 。 要 是 有 几 个 元 素 都 设置 了 这 个 属性 ， 那 么 浏览 央 
将 会 自动 聚焦 于 其 中 的 最 后 一 个 元 素 。 


12.5 ”禁用 单个 input 元 素 


如 果 不 想 让 用 户 在 某 个 input 元 素 中 输入 数据 ， 可 以 禁用 它 。 这 看 似 奇 怪 ， 其 实 不 然 。 设 计 
者 也 许 想 要 为 几 个 相关 任务 提供 一 致 的 用 户 界面 , 但 是 其 中 有 些 元 素 并 非 总 是 用 得 上 。 此 外 有 时 
也 需要 根据 用 户 的 操作 用 JavaScript 启 用 某 些 元 素 。 这 方面 的 一 个 常见 例子 是 : 在 用 户 选择 将 货 
发 到 账单 地 址 之 外 的 地 址 时 ， 启 用 一 组 用 来 收集 新 地 址 信息 的 input 元 素 (通过 DOM 启 用 元 素 的 eee 
说 明 参 见 第 25 章 至 第 31 章 。 选 择 框 的 使 用 参见 第 13 章 )。 
要 禁用 :input 元 素 ， 需 要 设置 其 disabled 属 性 ， 如 代码 清单 12-11 所 示 。 


代码 清单 12-11 设置 input 元 素 的 disabled 属 性 


<!DOCTYPE HTML> 






































«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
</head> 
<body> 
<form method="post" action="http://titan:8080/form" > 
<p> 
«label for="fave">Fruit: <input autofocus id-"fave" name="fave"/></label> 
</p> 
<p> 


«label for="name">Name: <input disabled id="name" name-"name"/»«/label» 
</p> 





<button>Submit Vote</button> 


</form> 
</body> 
</html> 


此 例 在 收集 用 户 姓 名 的 那个 input 元 素 上 设置 了 disabled 属 性 。 禁 用 后 的 input 元 素 在 Chrome 


中 的 样子 如 图 12-7 所 示 。 其 他 浏览 器 为 其 使 用 的 样式 与 此 类 似 。 
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图 12-7 禁用 input 元 素 








12.6 ”对 表单 元 素 编 组 


对 于 更 复杂 的 表单 ， 有 时 需要 将 一 些 元 素 组 织 在 一 起 。 为 此 可 以 使 用 fieldset 元 素 。 表 12-8 


概括 了 这 个 元 素 。 


元 素 

元 素 类 型 

允许 具有 的 父 元 素 
局 部 属性 











内 容 
标签 用 法 
是 否 为 HTML5 新 增 
在 HTML5 中 的 变化 
习惯 样式 




















代码 清单 12-12 示 范 了 fieldset 元 素 的 用 法 。 该 例 添加 了 一 些 input 元 素 ， 以 演示 如 何 将 


表 12-8 fieldset 元 素 
fieldset 
流 元 素 
任何 可 以 包含 流 元 素 的 元 素 ， 通 常 是 form 元 素 的 后 代 元 素 
name, form, disabled 
流 内 容 。 在 开头 位 置 可 以 包含 一 个 legend 元 素 
开始 标签 和 结束 标签 


f? 














fornm 属 性 是 HTML5 中 新 增 的 ， 详 见 12.8 节 
fieldset { display: block; margin-start: 2px; 





margin-end: 2px; padding-before: 0.35em; 
padding-start: 0.75em; padding-end: 0.75em; 





padding-after: 0.625em; border: 2px groove; } 


fieldset 用 于 form 中 的 一 部 分 元 素 。 
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代码 清单 12-12 ”使 用 fieldset 元 素 


<!DOCTYPE HTML> 

















name="name"/></label></p> 
name="city"/></label></p> 


names" fave1" /»«/label»«/p» 
name="fave2"/></label></p> 
name="fave3"/></label></p> 


«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«fieldset» 
«p»«label for-"name"»Name: «input id-"name" 
«p»«label for-"city"»City: «input id-"city" 
«/fieldset» 
<fieldset> 
«p»«label for="favei">#1: <input id="fave1" 
<p><label for="fave2">#2: <input id="fave2" 
«p»«label for="fave3">#3: «input id="fave3" 
</fieldset> 
<button>Submit Vote</button> 
</form> 
</body> 
</html> 





此 例 用 一 个 fieldset 元 素 将 两 个 用 来 收集 用 户 个 人 信息 的 input 元 素 编 为 一 组 ， 又 用 另 一 个 


fieldset 元 素 将 三 个 用 来 让 用 户 为 其 喜欢 的 水 果 投 票 的 input 元 素 编 为 


样式 效果 如 图 12-8 所 示 。 


组 。fieldset 元 素 的 习惯 
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(O titan 


Name: 
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Submit Vote 











图 12-8 ”用 fieldset 元 素 对 input 元 素 编组 








12.6.1 为 fieldset 元 素 添 加 说 明 标 签 


上 面 的 例子 中 已 将 input 元 素 分 别 编组 ， 但 是 未 向 用 户 提供 相关 说 明 。 在 每 一 个 fieldset 元 
素 中 添加 一 个 legend 元 素 即 可 弥补 这 个 缺点 ， 表 12-9 概 括 了 这 个 元 素 。 


表 12-9 legend 元 素 









































元 素 legend 

元 素 类 型 无 

允许 具有 的 父 元 素 fieldset 元 素 

局 部 属性 无 

内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 否 

在 HTML5 中 的 变化 无 

习惯 样式 legend { display: block; padding-start: 2px; 





padding-end: 2px; border: none; } 





legend 元 素 必须 是 fieldset 元 素 的 第 一 个 子 元 素 ， 如 代码 清单 12-13 所 示 。 


代码 清单 12-13 使 用 1egend 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 





«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<fieldset> 
<legend>Enter Your Details</legend> 
<p><label for="name">Name: <input id="name" name="name"/></label></p> 
<p><label for="name">City: «input id-"city" name="city"/></label></p> 
</fieldset> 
<fieldset> 
<legend>Vote For Your Three Favorite Fruits</legend> 
<p><label for="fave1">#1: <input id="fave1" name-"fave1"/»«/label»«/p» 
<p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p> 
«p»«label for="fave3">#3: «input id="fave3" name="fave3"/></label></p> 
</fieldset> 
<button>Submit Vote</button> 
</form> 
</body> 


</html> 
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legend 元 素 在 浏览 器 中 的 显示 结果 如 图 12-9 所 示 。 
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图 12-9 ”使 用 legend 元 素 






































12.6.2 FA fieldset 禁用 整 组 input 元 素 | 


本 章 前 面 已 经 示范 过 如 何 禁 用 单个 input 元 素 。 通 过 设置 fieldset 元 素 的 disabled 属 性 ,可 以 
一 次 性 地 禁用 多 个 input 元 素 。 此 时 fieldset 元 素 中 包含 的 所 有 input 元 素 都 会 被 禁用 ， 如 代码 清 
单 12-14 所 示 。 
代码 清单 12-14 ”用 fieldset 元 素 禁用 input 元 素 

<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«fieldset» 


<legend>Enter Your Details</legend> 
<p><label for="name">Name: <input id="name" name="name"/></label></p> 
«p»«label for="name">City: <input id-"city" name="city"/></label></p> 





</fieldset> 

<fieldset disabled> 
<legend>Vote For Your Three Favorite Fruits</legend> 
<p><label for="fave1">#1: <input id="fave1" name-"fave1"/»«/label»«/p» 
<p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p> 
<p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p> 

</fieldset> 

<button>Submit Vote</button> 

</form> 
</body> 
</html> 


这 些 input 元 素 被 禁用 后 的 效果 如 图 12-10 所 示 。 
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12-10 ”通过 fieldset 元 素 禁用 input 元 素 











12.7 ”使 用 button 元 素 


button 元 素 其 实 比 它 的 外 表 给 人 的 感觉 更 灵活 。 该 元 素 有 三 种 用 法 ， 这 些 不 同 的 操作 模式 通 
过 具有 三 种 值 的 type 属 性 设 定 ， 其 说 明 见 表 12-10。 
表 12-10 ”button 元 素 的 type 属 性 的 值 











值 OAR 
um 表示 按钮 的 用 途 是 提交 表单 
ui Ae HE HL FH RE DM 














button 表示 按钮 没有 具体 语义 
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al 


下 面 我 们 来 逐一 说 明 上 述 三 个 属性 值 及 其 代表 的 功能 。 





12.7.1 用 button 元 素 提 交 表 单 
































如 果 将 button 元 素 的 type 属 性 设置 为 supmit， 那 么 按 下 该 按钮 会 提交 包含 它 的 表单 。 这 是 未 


设置 type 属 性 的 button 元 素 的 默认 行为 。 采 用 这 种 方法 使 用 该 元 素 时 ， 它 还 有 和 额外 的 一 些 属性 可 
用 ， 如 表 12-11 所 述 。 














表 12-11 type 属性 设置 为 submit 时 button 元 素 的 额外 属性 
















































































mE 性 说 HB 
Form 指定 按钮 关联 的 表单 ， 详 见 12.8 节 
formaction 履 盖 form 元 素 的 action 属 性 ， 另 行 指定 表单 将 要 提交 到 的 URL。 关 于 action 属 性 ， 详 见 12.2.1 节 
formenctype 履 盖 form 元 素 的 enctype 属 性 ， 另 行 指定 表单 的 编码 方式 。 关 于 enctype 属 性 ， 详 见 12.2.3 节 
formmethod 覆盖 form 元 素 的 method 属 性 。 关 于 method 属 性 ， 详 见 12.2.2 节 
formtarget 覆盖 form 元 素 的 target 属 性 。 关 于 target 属 性 ， 详 见 12.2.5 节 
formnovalidate 覆盖 form 元 素 的 novalidate 属 性 ， 表 明 是 否 应 执行 客户 端 数据 有 效 性 检查 。 关 于 对 输入 数据 的 检 





查 ， 详 见 第 14 章 








这 些 属 性 主要 是 用 来 覆盖 或 补充 form 元 素 上 的 设置 ， 指 定 表单 提交 的 URL 、 使 用 的 HTTP 方 
法 、 编 码 方式 、 表 单反 馈 信 息 的 显示 地 点 ， 以 及 控制 客户 端 数据 检查 。 它 们 是 HTML5 中 新 增 的 
性 。 代 码 清单 12-15 示 范 了 这 些 元 素 的 用 法 。 


代码 清单 12-15 ”使 用 button 元 素 的 属性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 


«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 


«body» 
«form» 
«p» 
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«label for="fave">Fruit: «input autofocus id-"fave" name="fave"/></label> 
</p> 
<p> 
«label for="name">Name: «input id-"name" name="name"/></label> 
</p> 
«button type="submit" formaction-"http://titan:8080/form" 
formmethod="post">Submit Vote</button> 
</form> 
</body> 
</html> 
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此 例 未 设置 form 元 素 的 action 和 method 属 性 ， 转 而 通过 设置 button 元 素 的 formaction 和 
formmethod 属 性 来 达到 同样 的 目的 。 


12.7.2 Ħ button 元 素 重 置 表单 

如 果 将 button 元 素 的 type 属 性 设置 为 reset ， 那 么 按 下 按钮 会 将 表单 中 所 有 ;input 元 素 重 置 为 
初始 状态 。 这 样 使 用 该 元 素 时 , 没有 额外 的 属性 可 用 。 代码 清 单 12-16 中 的 例子 在 HTML 文档 中 添 
加 了 一 个 重 置 按钮 。 
代码 清单 12-16 ”用 button 元 素 重 置 表单 


<!DOCTYPE HTML> 

















<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«p» 
«label for="fave">Fruit: «input autofocus id-"fave" name="fave"/></label> 
</p> 
<p> 
«label for="name">Name: «input id-"name" name="name"/></label> 
</p> 
<button type="submit">Submit Vote</button> 
<button type="reset">Reset</button> 
</form> 
</body> 
</html> 


表单 的 重 置 效果 如 图 12-11 所 示 。 
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图 12-11 
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12.7.3 4B button 作为 一 般 元 素 使 用 


如 果 将 button 元 素 的 type 属 性 设置 为 button， 那 么 该 button 元 素 就 仅仅 是 一 个 按钮 。 它 没有 特别 
的 含义 ， 在 按 下 时 也 不 会 做 任何 事情 。 代 码 清单 12-17 的 例子 在 HTML 文 档 中 添加 了 这 样 一 个 按钮 。 


代码 清单 12-17 使 用 一 般 性 的 button 


<!DOCTYPE HTML> 








«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<p> 
<label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label> 
</p> 
<p> 
«label for="name">Name: «input id-"name" name="name"/></label> 
</p> 


<button type="submit">Submit Vote</button> 

<button type="reset">Reset</button> 

<button type="button">Do <strong>NOT</strong> press this button</button> 
</form> 


</body> 


这 样 使 用 该 元 素 看 起 来 似乎 没有 什么 意义 。 但 在 第 30 章 将 会 讲 到 ， 在 按 下 按钮 时 可 以 用 
JavaScript 执 行 一 些 操作 。 通 过 这 种 方法 即 可 用 button 元 素 实 现 自 定义 的 行为 。 

注意 ， 此 例 对 button 元 素 包 含 的 文字 设置 了 一 些 格式 。 该 元 素 中 的 文字 可 以 用 各 种 短语 元 素 
进行 标记 。 该 例 中 此 处 所 作 标 记 的 效果 如 图 12-12 所 示 。 
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图 12-12 ”添加 一 般 性 的 button 元 素 





12.8 ”使 用 表单 外 的 元 素 


在 HTML4 中 ，input 、button 和 其 他 与 表单 相关 的 元 素 必 须 放 在 form 元 素 中 。 本 章 前 面 所 有 
例子 都 是 这 样 做 的 。 在 HTML5 中 ， 这 条 限制 不 复 存在 。 现 在 可 以 将 这 类 元 素 与 文档 中 任何 地 方 
的 表单 挂钩 。input、button 元 素 以 及 第 14 章 将 要 介绍 的 其 他 与 表单 相关 的 元 素 都 定义 了 一 个 form 
属性 ， 该 属性 正 是 用 于 这 个 目的 。 要 将 某 个 这 类 元 素 与 并 非 其 祖先 元 素 的 form 元 素 挂 钩 ， 只 消 将 
其 form 属 性 设置 为 相关 form 元 素 的 id 属性 值 即 可 。 代 码 清单 12-18 即 为 一 例 。 


代码 清单 12-18 ”使 用 form 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 





















































«/head» 
«body» 
«form id="voteform" method="post" action-"http://titan:8080/form"» 
«p» 
«label for="fave">Fruit: «input autofocus id-"fave" name="fave"/></label> 
</p> 
</form> 
<p> 
«label for-"name"»Name: «input form-"voteform" id="name" name="name" /> 
«/label» 
</p> 


«button form="voteform" type-"submit"»Submit Vote</button> 
«button form="voteform" type-"reset"»Reset«/button» 
«/body» 
«/html» 
此 例 中 只 有 一 个 input 元 素 是 那个 form 元 素 的 后 代 元 素 。 另 一 个 input 元 素 和 两 个 button 元 素 


都 位 于 fornm 元 素 之 外 ， 但 是 它们 都 通过 设置 form 属 性 与 那个 form 元 素 关联 在 了 一 起 。 






































12.9 小 结 


本 章 讲 述 的 是 HTML5 表 单 的 基本 知识 。 我 示范 了 如 何 用 form 元 素 制作 表单 以 及 如 何 配 置 表 
单 的 工作 方式 ,介绍 了 input 和 button 两 种 基本 元 素 。 前 者 可 用 来 收集 用 户 输入 的 简单 文字 数据 ; 
后 者 可 用 来 提交 或 重 置 表单 ， 也 可 作为 一 个 一 般 性 的 按钮 使 用 。 

HTML5 表 单 有 一 些 很 棒 的 新 特性 〈 下 一 章 即 将 介绍 最 重要 的 一 些 特性 )， 就 连 那 些 基本 的 表 
单 操作 在 HTML5 中 也 得 到 了 改进 。 自 动 聚 焦 、 对 button 元 素 的 改进 以 及 把 与 表单 相关 的 元 素 与 
并 非 其 祖先 元 素 的 form 元 素 挂钩 的 功能 都 非常 受 欢迎 。 


























输入 特定 类 型 的 数据 。 在 后 一 种 情况 下 ， 可 以 对 in 
式 。 要 配置 input 元 素 需 要 用 到 其 type 


定制 input 元 素 








上 一 章 介绍 了 input 元 素 的 基本 用 法 ， 该 元 素 可 以 用 来 生成 一 个 供用 户 输 入 数据 的 简单 文本 
框 。 其 缺点 在 于 用 户 在 其 中 输入 什么 值 都 可 以 。 有 时 这 还 不 错 , 但 是 有 时 设计 者 可 能 希望 让 用 户 



































put 元 素 进行 配置 ， 改 变 其 收集 用 户 数 据 的 方 
属性 。 在 HIML5 中 该 








属性 有 23 个 不 同 的 值 。 在 将 type 属 性 


设置 为 想 要 的 值 之 后 ，input 元 素 又 有 一 些 额 外 的 属性 可 供 使 用 。 该 元 素 一 共有 30 个 属性 ， 其 中 






















































































































































































































































































许多 属性 只 能 与 特定 的 type 属 性 值 搭配 使 用 。 本 章 将 全 面 介绍 type 属 性 的 各 种 值 及 相关 的 元 素 属 
性 。 表 13-1 概 括 了 本 章 内 容 。 
表 13-1 本章 内 容 概要 
问 题 解决 方案 代码 清单 

设置 input 元 素 的 大 小 和 容量 使 用 size 和 maxlength 属 性 13-1 
为 input 元 素 设 置 初 始 值 或 关于 所 需 数 ”使 用 value 或 placeholder 属 性 13-2 
据 类 型 的 提示 

提供 一 批 建议 值 供用 户 选 择 使 用 input 元 素 的 list 属 性 和 datalist 元 素 13-3 
生成 只 读 或 被 禁用 的 input 元 素 使 用 readonly 或 disabled 属 性 13-4 
隐藏 用 户 输入 的 字符 使 F jpassword 型 input 元 素 " 13-5 

用 ;input 元 素 生 成 按钮 使 用 submit 、reset 或 button 型 input 元 素 13-6 
将 输入 内 容 限制 为 数值 使 用 number 型 input 元 素 13-7 
将 输入 内 容 限制 在 一 个 数值 范围 使 用 range 型 input 元 素 13-8 
限制 用 户 只 能 选择 是 或 否 使 用 checkbox 型 input 元 素 13-9 
限制 用 户 在 有 限 几 个 选项 中 进行 选择 使 用 radio 型 input 元 素 13-10 
将 输入 内 容 限制 为 特定 格式 的 字符 串 使 用 email 、tel 或 url 型 input 元 素 13-11 
将 输入 内 容 限 制 为 时 间或 日 期 使 用 datetime 、datetime-local 、date、month 、time 或 week 型 input 13-12 

元 素 

让 用 户 选择 一 种 颜色 使 用 color 型 input 元 素 13-13 
让 用 户 输入 一 个 搜索 用 词 使 用 search 型 input 元 素 13-14 


























(D 指 type 














属性 设置 为 password 的 input 元 素 。 后 面 还 有 大 量 类 似 说 法 ， 





不 再 更 述 。 译 者 注 
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( & ) 
问 题 解决 方案 代码 清单 
生成 隐藏 的 input 元 素 使 用 hidden 型 input 元 素 13-15 
生成 用 来 提交 表单 的 图 像 按钮 使 用 image 型 input 元 素 13-16 
上 传 文件 到 服务 器 使 用 file 型 input 元 素 ， 并 将 form 元 素 的 enctype 属 性 设置 为 13-17 
multipart/form-data 








13.1 FA input 元 素 输入 文字 


type 属 性 设置 为 text 的 input 元 素 在 浏览 器 中 显示 为 一 个 单行 文本 框 。 上 一 章 用 到 的 input 元 
素 就 是 这 个 样子 , 这 是 未 设置 type 属 性 情况 下 的 默认 形式 。 表 13-2 罗 列 了 可 用 于 这 种 类 型 的 input 
元 素 的 各 种 属性 〈 上 一 章 中 已 讲 过 的 不 再 歼 述 )。 

表 13-2 text 型 input 元 素 可 用 的 额外 属性 























































































































































































































E 性 说 明 是 否 为 HTML5 新 增 
dirname 指定 元 素 内 容 文 字 方向 的 名 称 ， 参 见 13.1.5 节 是 
list 指定 为 文本 框 提 供 建议 值 的 datalist 元 素 ， 其 值 为 datalist 元 素 的 id 值 ， 详 见 13.1.3 节 是 
maxlength 设 定 用 户 可 以 在 文本 框 中 输入 的 字符 的 最 大 数目 ， 详 见 13.1.1 节 f 
pattern 指定 一 个 用 于 输入 验证 的 正则 表达 式 ， 详 见 第 14 章 是 
placeholder ”指定 关于 所 需 数据 类 型 的 提示 ， 详 见 13.1.2 节 是 
readonly 来 将 文本 框 设 为 只 读 以 阻止 用 户 编辑 其 内 容 ， 详 见 13.1.4 节 E 
required 表明 用 户 必 须 输入 一 个 值 ， 否 则 无 法 通过 输入 验证 ， 详 见 第 14 章 是 
size 通过 指定 文本 框 中 可 见 的 字符 数目 设 定 其 宽度 ， 详 见 13.1.1 节 En 
value 设置 文本 框 的 初始 值 ， 详 见 13.1.2 节 f 








下 面 逐 一 说 明 这 些 属 性 。 


提示 如果 要 使 用 多 行文 本 框 ， 请 使 用 textarea 元 素 ， 具 体 参 见 第 14 章 。 


13.1.1 设 定 元 素 大 小 

有 两 个 属性 能 够 对 文本 框 的 大 小 产生 影响 。maxlength 属 性 设 定 了 用 户 能 够 输入 的 字符 的 最 
大 数目 ，size 属 性 则 设 定 了 文本 框 能 够 显示 的 字符 数目 。 二 者 的 字符 数目 均 以 正 整数 表示 。 代 码 
清单 13-1 示 范 了 这 两 个 属性 的 用 法 。 
代码 清单 13-1 使 用 maxlength 和 size 属 性 


<!DOCTYPE HTML> 
<html> 
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<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 


«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«p» 
«label for="name"> 
Name: «input maxlength-"10" id-"name" name-"name"/» 
</label> 
</p> 
<p> 
<label for="city"> 
City: «input size="10" id-"city" name-"city"/» 
</label> 
</p> 
<p> 
<label for="fave"> 
Fruit: <input size="10" maxlength="10" id="fave" name="fave"/> 
</label> 
</p> 
<button type="submit">Submit Vote</button> 
</form> 
</body> 
</html> 


此 例 中 第 一 个 input 元 素 的 raxlength 属 性 被 设置 为 10。 浏 览 器 可 以 自行 确定 该 文本 框 在 屏幕 
上 占据 的 宽度 , 但 用 户 最 多 只 能 在 其 中 输入 10 个 字符 。 如 果 用 户 试图 输入 更 多 的 字符 ,那么 浏览 
带 会 忽略 多 出 的 这 些 输 入 内 容 。 

第 二 个 input 元 素 的 size 属 性 被 设置 为 10。 浏 览 器 必须 确保 该 文本 框 的 宽度 足以 显示 10 个 字 
符 。 该 属性 对 用 户 能 够 输入 的 字符 数目 未 作 限 制 。 

第 三 个 input 元 素 同时 设置 了 这 两 个 属性 ， 既 确定 了 文本 框 在 屏幕 上 的 大 小 ， 又 限制 了 用 户 
能 够 输入 的 字符 数目 。 图 13-1 显 示 了 这 些 属 性 对 显示 效果 和 发 送 给 服务 器 的 数据 项 的 影响 。 
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图 13-1 使 用 maxlength 和 size 属 性 
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制 用 户 能 够 输 
13.1.2 





置 初始 值 和 占 位 式 提示 

先前 的 例子 中 的 文本 框 在 文档 刚 载 人 时 都 是 

value 属 性 设置 一 个 默认 值 ， 还 可 以 用 placehol 
型 的 数据 。 代 码 清 单 13-2 示 范 了 这 些 
































der 属 性 i 
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«IDOCTYPE HTML» 
«html» 


些 属性 的 用 法 。 
代码 清单 13-2 使 用 value 和 placeholder 属 性 


<head> 


<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel="shortcut icon" ="favi 
</head> 
<body> 
<form method="post 
<p> 


action-"http://titan:8080/form"» 
«label for="name"> 


Name: «input placeholder-"Your name" id-"name" 
«/label» 
</p> 
<p> 
<label for="city"> 
City: <input placeholder="Where you live" id-"city" 
</label> 
</p> 
<p> 
<label for="fave"> 
Fruit: <input value-"Apple" id="fave" name-"fave"/» 
«/label» 
</p> 
«button type-"submit"»Submit Vote</button> 
</form> 
</body> 
</html> 














如 果 需 要 用 户 输入 数据 , 而 且 想 提示 用 户 应 
属性 。 如 果 想 


想 要 提供 一 个 默认 值 
会 被 接受 的 常见 选择 ， 那 就 应 该 使 月 








应 该 输入 什么 样 的 数据 , 那 就 
不 管 是 因为 用 户 之 前 提供 

















入 的 字符 数 ， 只 会 限制 浏览 器 所 能 显示 的 字符 数 
设置 1 


href-"favicon.ico" type="image/x-icon 














图 中 使 用 的 浏览 器 是 Firefox， 这 是 因为 我 最 爱 用 的 Chrome 没 有 正确 实现 size 属 性 。 
送 到 服务 器 的 数据 ， 会 发 现 city 这 项 数据 所 含 字符 比 屏幕 上 显示 的 多 。 





这 是 因为 size 属 
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name="name"/> 


name="city"/> 














有 value 属 性 。 浏 览 器 使 用 这 
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j 
Py 





提示 “用 button 元 素 重 置 表单 时 ( 参 


第 12 章 ), 浏览 器 会 


iz 





ifii FH placeholder 





size US s 还 是 因为 这 是 一 个 可 能 
月 这 些 属 性 值 的 方式 如 图 13-2 所 示 。 


恢复 文本 框 中 的 占 位 式 提 示 和 默认 值 。 








细 看 发 
B^ AR 


的 , 不 过 它们 不 是 非 这 样 不 可 。 设计 者 可 以 用 


H y 
设置 一 段 提 示 文 字 ， 告 诉 用 户 应 该 输入 什 








| Name: 
City: 
Fruit: ‘Apple 


| Submit Vote | 











13.1 用 input 元 素 输 入 文字 259 
= = [em 
j By Example \ 
le > Œ | Q titan/listings/example.htm! iv Xl 














网 13-2 


13.1.3 ”使 用 数据 列表 





提供 默认 值 和 占 位 式 提示 








可 以 将 input 元 素 的 list 属 性 设置 为 一 个 datalist 元 素 的 id 属性 值 , 这 样 用 户 在 文本 框 中 输入 
数据 时 只 需 从 后 一 元 素 提供 的 一 批 选项 中 进行 选择 就 行 了 。 表 13-3 概 括 了 datalist 元 素 。 





表 13-3 datalis 


元 素 
元 素 类 型 
允许 具有 的 父 元 素 
局 部 属性 























标签 用 法 
是 否 为 HTML5 新 增 
在 HTML5 中 的 变化 
习惯 样式 











t 元 素 
datalist 
短语 
任何 可 以 包含 短语 元 素 的 元 素 














option 元 素 和 短语 内 容 
开始 标签 和 结束 标签 


oS du 


datalist 元 素 是 HTML5 中 新 增 的 ， 它 可 以 用 来 提供 一 批 值 ， 以 便 帮 助 用 户 输入 需要 的 数据 。 
不 同类 型 的 input 元 素 使 用 datalist 元 素 的 方式 略 有 差异 。 对 于 text 型 input 元 素 ，datalist 元 素 
提供 的 值 以 自动 补 全 建议 值 的 方式 呈现 。 提 供给 用 户 选择 的 值 各 用 一 个 option 元 素 指定 。 表 13-4 











概括 了 option 元 素 。 





提示 第 14 章 讲 到 select 和 optgroup 元 素 时 还 会 再 次 提 到 option 元 素 。 
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表 13-4 option 元素 









































元 素 option 

元 素 类 型 无 

允许 具有 的 父 元 素 datalist, select, optgroup 

局 部 属性 disabled, selected, label#llvalue 

内 容 字符 数据 

标签 用 法 虚 元 素 形 式 ， 或 开始 标签 与 结束 标签 一 起 使 用 
是 否 为 HTML5 新 增 ff 

在 HTML5 中 的 变化 无 

习惯 样式 无 





代码 清单 13-3 示 范 了 如 何 用 datalist 和 option 元 素 为 文本 框 准备 好 一 批 值 。 
代码 清单 13-3 ”使 用 datalist 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<p> 
<label for="name"> 
Name: <input placeholder="Your name" id="name" name="name"/> 
</label> 
</p> 
<p> 
<label for="city"> 
City: <input placeholder="Where you live" id="city" name="city"/> 
</label> 
</p> 
<p> 
<label for="fave"> 
Fruit: <input list="fruitlist" id="fave" name="fave"/> 
</label> 
</p> 
«button type-"submit"»Submit Vote</button> 
«/form» 


«datalist id="fruitlist"> 
«option value-"Apples" label-"Lovely Apples"/» 
«option value="Oranges">Refreshing Oranges</option> 
<option value="Cherries"/> 

</datalist> 
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</body> 
</html> 


包含 在 datalist 元 素 中 的 每 一 个 option 元 素 都 代表 一 个 供用 户 选择 的 值 。 其 value 属 性 值 在 该 
元 素 代 表 的 选项 被 选中 时 就 是 input 元 素 所 用 的 数据 值 。 显 示 在 选择 列表 中 的 未 必 是 option 元 素 
的 value 属 性 值 , 还 可 以 是 另行 设 定 的 一 条 说 明 信 息 。 它 可 以 用 lapel 属 性 设置 , 也 可 以 作为 option 
元 素 的 内 容 设置 。 在 代码 清单 13-3 中 值 为 Apples 和 0ranges 的 两 个 option 元 素 就 是 这 样 做 的 。 
13-3 显 示 了 浏览 器 处 理 定义 在 datalist 中 的 option 元 素 的 方式 。 
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€ 9 | BY htpy/ttarlistingsyexamplehtml Cy ~ dots 
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Name: Your name 
City: Where you live 


Fruit: 
Refreshing Oranges ~ 
Cherries 























图 13-3 ”搭配 使 用 input 和 datalist 元 素 











使 用 这 种 text 型 input 元 素 时 要 注意 : 如 果 某 个 option 元 素 的 内 容 或 label 值 与 其 value 值 不 
E, 那么 用 户 可 能 会 搞 不 懂 为 什么 点 击 Lovely Apples 结 果 却 是 在 文本 框 中 输入 Apples。 有 些 浏览 
器 (如 Opera ) 对 这 种 情况 采用 的 处 理 方式 略 有 不 同 ， 如 图 13-4 所 示 。 
Ta CEES 


` s, 
























i Name: | Your name | 
City: | Where you live | | 


Fruit: | 
Apples Lovely Apples | 

[Sub ETE 

O @ * € | View... < ——Q———— 


L J 


113-4 ”value 和 1abel 属 性 值 不 同时 0pera 会 将 它们 都 显示 出 来 
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这 种 处 理 方 式 略 有 进步 ( 注意: 它 只 检查 了 option 元 素 的 1abpel1 属 性 ， 没 管 其 内 容 )， 不 过 还 
是 难免 让 人 糊涂 。 


13.1.4 生成 只 读 或 被 禁用 的 文本 框 


readonly 和 disabled 属 性 都 可 以 用 来 生成 用 户 不 能 编辑 的 文本 框 ， 其 结果 的 外 观 不 同 。 代 码 
清单 13-4 示 范 了 这 两 个 属性 的 用 法 。 


























代码 清单 13-4 ”使 用 readonly 和 disabled 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<p> 
<label for="name"> 
Name: <input value="Adam" disabled id="name" name="name"/> 
</label> 
</p> 
<p> 
<label for="city"> 
City: «input value-"Boston" readonly id="city" name="city"/> 
</label> 
</p> 
<p> 
<label for="fave"> 
Fruit: <input id="fave" name="fave"/> 
</label> 
</p> 
«button type-"submit"»Submit Vote</button> 
</form> 
</body> 
</html> 


其 结果 如 图 13-5 所 示 。 
ee 4 中 的 第 一 个 input 元 素 设置 了 disabled 属 性 , 结果 该 文本 框 显示 为 灰色 , 而 且 用 
能 编辑 其 中 的 文字 。 第 二 个 input 元 素 设置 了 readonly 属 性 ， 这 也 会 阻止 用 户 编 辑 文 本 框 中 
ius 但 不 会 影响 其 外 观 。 提 交 表 单 后 ， 看 看 发 送 给 服务 器 的 数据 有 什么 不 同 ， 结 果 如 图 13-6 
所 示 。 
注意 ， 设 置 了 disabled 属 性 的 input 元 素 的 数据 没有 被 提交 到 服务 器 。 如 果 既 要 用 这 个 属性 
又 想 把 数据 发 到 服务 器 ， 那 么 应 该 考虑 使 用 hidden 型 Input 元 素 〈 人 参见 13.6 节 )。 
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Name: [Adam 





City: Boston 








Fruit: | 





























图 13-$ 使 用 disabled 和 readonly 属 性 
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图 13-6 ”比较 分 别 设置 了 readonly 和 disabled 属 性 的 input 元 素 发 到 服务 器 的 数据 
readonly 属 性 要 谨慎 使 用 。 虽然 使 用 这 个 属性 的 input 元 素 的 数据 能 够 发 给 服务 器 , 但 是 没有 
什么 视觉 信号 告诉 用 户 该 文本 框 已 禁止 编辑 ,浏览 器 不 会 理会 用 户 的 输入 操作 , 这 会 让 用 户 困 惑 。 
13.1.5 ”指定 文字 方向 数据 的 名 称 
通过 设置 dirname 属 性 ， 可 以 将 用 户 输入 文字 的 方向 数据 发 送 给 服务 器 ， 该 属性 的 值 就 是 方 
向 数据 项 的 名 称 。 在 撰写 本 书 时 ， 还 没有 主流 浏览 器 支持 这 个 属性 。 
13.2 用 input 元 素 输入 密码 


type 属 性 值 设 置 为 password 的 input 元 素 用 于 输入 密码 。 用 户 输入 的 字符 在 这 种 文本 框 中 显示 
HES (* ) 之 类 的 掩饰 字符 。 表 13-5 罗 列 了 input 元 素 在 type 属 性 被 设置 为 password 时 可 用 的 一 
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些 额外 属性 。 这 些 属性 text 型 input 元 素 也 有 ， 而 且 用 法 相同 。 


#213-5 ”password 型 input 元 素 可 用 的 额外 属性 








"uni 
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属 性 说 — Bj 是 否 为 HTML5 新 增 
maxlength 设 定 用 户 可 以 在 密码 框 中 输入 的 字符 的 最 大 数目 ， 详 见 13.1.1 节 8 
pattern 指定 一 个 用 于 输入 验证 的 正则 表达 式 ， 详 见 第 14 章 是 
palceholder 指定 关于 所 需 数据 类 型 的 提示 ， 详 见 13.1.2 节 是 
readonly 将 密码 框 设 为 只 读 以 阻止 用 户 编辑 其 中 的 内 容 ， 详 见 13.1.4 节 T 
required 表明 用 户 必 须 输 入 一 个 值 ， 否 则 无 法 通过 输入 验证 ， 详 见 第 14 章 是 
Size 通过 指定 密码 框 中 可 见 的 字符 数目 设 定 其 宽度 ， 详 见 13.1.1 节 T 
value 设置 初始 密码 值 T 


代码 清单 13-5 示 范 了 password 型 input 元 素 的 用 法 。 


代码 清单 13-5 ”使 用 password 型 input 元 素 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<p> 
<label for="name"> 
Name: «input value-"Adam" id-"name" name="name"/> 
«/label» 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id-"password" name="password"/> 
</label> 
</p> 
<p> 
<label for="fave"> 
Fruit: <input value="Apples" id="fave" name="fave"/> 
</label> 
</p> 
«button type-"submit"»Submit Vote</button> 
</form> 
</body> 
</html> 


在 上 面 的 代码 清单 中 ， 那 个 password 型 input 元 素 还 设置 了 placeholder 





属性 ， 用 以 提示 用 户 





WwW 
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所 需 的 是 什么 样 的 密码 。 用 户 输入 密码 的 时 候 , 浏览 絮 会 清除 文本 框 中 的 占 位 式 提示 并 将 每 一 个 
密码 字符 显示 为 圆 点 〈 具体 使 用 的 掩饰 字符 因 浏览 器 而 异 )。 其 效果 如 图 13-7 所 示 。 
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€ -> Q Otitan/listings/exam 





J M Example 
€ > Œ Otitan/listings/examplehtm! WA 













Name: Adam í 
: Name: Adam 





Password: [Min 6 characters 








Fruit: A\ 
NS Fruit: Apples 









Submit Vote 








Submit Vote 








图 13-7 使 用 password 型 input 元 素 
有 一 件 事 读者 想必 都 明白 , 不 过 我 还 是 要 提 一 句 : 在 此 过 程 中 用 户 输入 的 内 容 只 是 显示 为 扼 
饰 字符 ， 而 不 是 被 替换 为 掩饰 字符 。 提 交 表 单 时 ， 服 务 器 收 到 的 是 明文 密码 。 图 13-8 显 示 了 来 自 
Node.js 脚 本 的 反馈 信息 。 
Á © Post data x se 


€ > QC | QO titan:8080/form 家 | 入 








Form Data 





























13-8 ”提交 包含 密码 字段 的 表单 


警告 ”在 提交 表单 时 password 型 input 元 素 不 会 对 密码 加 以 保护 ， 用 户 输入 的 值 以 明文 传输 。 对 
于 安全 至 关 重 要 ( 理应 如 此 ) 的 网 站 和 应 用 系统 ， 应 该 考虑 使 用 SSL/HTTPS 对 浏览 器 和 
服务 器 之 间 的 通信 内 容 加 密 。 


3% 定制 input 元 素 





13.3 Hi 


nput 元 素 生成 按钮 





将 input 元 素 的 type 属 性 设置 为 supmit、reset 和 button 会 生成 类 似 button 元 素 (参见 第 12 章 ) 
那样 的 按钮 。 表 13-6 概 括 了 这 三 种 类 型 的 input 元 素 。 








表 13-6 ” 几 种 用 来 生成 按钮 的 input 元 素 类 型 









































type 属 性 值 说 明 可 用 的 额外 属性 

submit 生成 用 来 提交 表单 的 按钮 formaction, formenctype、formmethod、formtarget 和 formnovalidate 
reset 生成 用 来 重 置 表单 的 按钮 无 

button 生成 不 执行 任何 操作 的 按钮 无 





ni 





submit 型 input 元 素 可 用 的 额外 属性 与 button 元 素 的 同名 属性 用 法 相同 。 这 些 属性 的 说 明和 演 


示人 参见 第 12 章 。 
上 述 三 类 in 


代码 清单 13-6 





<!DOCTYPE HI 


<html> 
<head> 
<ti 
<me 
<me 


























reset 和 button 型 input 元 素 没有 定义 任何 额外 的 属 


B | 
EJ o 


put 元 素 生成 的 按钮 上 的 说 明文 字 均 来 自 它们 的 value 属 性 值 ， 如 代码 清单 13-6 所 示 。 
用 input 元 素 生 成 按钮 


IML> 


7 





tle>Example</title> 
ta name="author" content="Adam Freeman"/> 
ta name="description" content="A simple example"/> 





<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 


</head> 
<body> 


<form method="post" action="http://titan:8080/form"> 


<p> 
<label for="name"> 
Name: <input value="Adam" id="name" name="name"/> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 


<label for="fave"> 
Fruit: <input value="Apples" id="fave" name="fave"/> 
</label> 
</p> 
<input type="submit" value="Submit Vote"/> 
<input type="reset" value="Reset Form"/> 
<input type="button" value="My Button"/> 


</form> 
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</body> 
</html> 


这 些 按钮 的 显示 结果 如 图 13-9 所 示 。 从 图 中 可 以 看 到 ， 它 们 与 用 button 元 素 生 成 的 按钮 外 观 
上 并 无 二 致 。 





j Bid Example we 
€ > C QOtitan/listings/examplehtml vy | A | 





| Name: Adam 
Password: |M 


Fruit: Apples 


Submit Vote | | Reset Form | | My Button 


j 
= = ~ — 


图 13-9 用 ;input 元 素 生 成 按钮 


用 input 元 素 生成 按钮 与 用 button 元 素 的 不 同 之 处 在 于 后 者 可 以 用 来 显示 含 标记 的 文字 (第 
12 章 中 有 一 个 例子 )。 有 些 较 陈旧 的 浏览 右 ( 比如 IE6 ) 不 能 正确 处 理 putton 元 素 ， 所 以 很 多 网 站 
都 更 倾向 于 用 ;input 元 素 生成 按钮 一 一 各 浏览 器 对 这 个 元 素 的 处 理 方式 向 来 都 比较 一 致 。 


13.4 用 input 元 素 为 输入 数据 把 关 
input 元 素 的 type 属 性 在 HTML5 中 新 增 的 一 些 值 可 以 对 用 户 输入 的 数据 类 型 提出 更 有 具体 的 要 CEN 


E 


求 。 随 后 的 各 节 将 分 别 介绍 一 个 这 类 type 属 性 值 并 演示 其 用 法 。 表 13-7 概 括 了 这 些 type 属 性 值 。 
表 13-7 用 于 输入 受 限 数据 的 input 元 素 的 type 属 性 值 



































































































































属 性 说 明 是 否 为 HTML5 新 增 
checkbox 将 输入 限制 为 在 一 个 “是 / 否 ” 二 态 复 选 框 中 进行 选择 f 
color 只 能 输入 颜色 信息 是 
date 只 能 输入 日 期 是 
datetime 只 能 输入 带 时 区 信息 的 世界 时 (包括 日 期 和 时 间 ) 是 
datetime-local 只 能 输入 不 带 时 区 信息 的 世界 时 ( 包括 日 期 和 时 间 ) 是 
email 只 能 输入 规范 的 电子 邮箱 地 址 是 
month 只 能 输入 年 和 月 是 
number 只 能 输入 整数 或 浮 点 数 是 
radiobutton 将 输入 限制 为 在 一 组 固定 选项 中 进行 选择 T 









































(EE) 

E 性 说 — Bj 是 否 为 HTML5 新 增 
range 只 能 输入 指定 范围 内 的 数值 是 
tel 只 能 输入 规范 的 电话 号 码 是 
time 只 能 输入 时 间 信 息 是 
week 只 能 输入 年 及 星期 信息 是 
url 只 能 输入 完全 限定 的 URL 是 





这 一 系列 类 型 的 input 元 素 中 有 些 能 用 明显 的 视觉 信号 告诉 用 户 对 输入 或 选择 的 数据 有 什么 
限制 (例如 checkbox 型 和 radiobutton 型 input 元 素 ); 而 像 enai 型 和 ur]1 型 等 其 他 类 型 input 元 素 则 
只 能 依靠 输入 检查 功能 ( 参见 第 14 章 )。 











13.4.1 用 input 元 素 获 取 数 值 


type 属 性 设置 为 number 的 input 元 素 生 成 的 输入 框 只 接受 数值 。 有 些 浏览 器 ( 如 Chrome ) 还 
会 在 旁边 显示 用 来 上 调和 下 调 数值 的 箭头 形 小 按钮 。 表 13-8 介 绍 了 这 种 类 型 的 input 元 素 可 用 的 
额外 属性 。 














表 13-8 number 型 input 元 素 可 用 的 额外 属性 






































































































































属 性 说 Hj 是 否 为 HTML5 新 增 

list 指定 为 文本 框 提供 建议 值 的 datalist 元 素 。 其 值 为 datalist 元 素 的 id 值 。 datalist 是 
元 素 的 介绍 详 见 13.1.3 节 

min 设 定 可 接受 的 最 小 值 (也 是 下 调 按钮 【如 果 有 的 话 ] 的 下 限 ) 以 便 进行 输入 验 是 
证 。 输 入 验证 的 介绍 详 见 第 14 章 

Max 设 定 可 接受 的 最 大 值 (也 是 上 调 按钮 【如 果 有 的 话 ] 的 上 限 ) 以 便 进行 输入 验 是 
证 。 输 入 验证 的 介绍 详 见 第 14 章 

readonly ] 来 将 文本 框 设置 为 只 读 以 阻止 用 户 编辑 其 内 容 。 详 见 13.1.4 节 f? 

required 表明 用 户 必 须 输入 一 个 值 ， 否 则 无 法 通过 输入 验证 。 详 见 第 14 章 是 

step 指定 上 下 调节 数值 的 步 长 是 

value 指定 元 素 的 初始 值 f 























min 、max、step 和 value 属 性 值 可 以 是 整数 或 小 数 ， 如 3 和 3.14 都 是 有 效 值 。 代 码 清 单 13-7 示 范 
了 number 型 input 元 素 的 用 法 。 


代码 清单 13-7 使 用 number 型 jnput 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 





13.4 用 input 元 素 为 输入 数据 把 关 269 





<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 


</head> 
<body> 
<form method="post" action-"http://titan:8080/form"» 
<p> 
«label for="name"> 
Name: «input value="Adam" id-"name" name="name"/> 
«/label» 
</p> 
<p> 
«label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
«label for="fave"> 
Fruit: <input value="Apples" id="fave" name="fave"/> 
</label> 
</p> 
<p> 
«label for="price"> 
$ per unit in your area: 
«input type-"number" step="1" min="0" max="100" 
value="1" id-"price" name="price"/> 
</label> 
</p> 
<input type="submit" value="Submit Vote"/> 
</form> 





</body> 


代码 清单 13-7 中 添加 了 一 个 number 型 input 元 素 ， 要 求 用 户 提供 其 爱 吃 的 水 果 在 当地 的 价格 。 
该 元 素 的 最 小 值 、 最 大 值 、 步 长 和 初始 值 分 别 设置 为 1、100、1 和 1， 其 显示 效果 如 图 13-10 所 示 。 
图 中 既 有 Firefox 的 截图 又 有 Chrome 的 截图 。 注意 Chrome 还 显示 了 用 来 调节 数值 的 箭头 形 小 按钮 ， 
而 Firefox 中 没有 这 个 东西 。 
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Submit Vola.. 














| 
| 
| 
| 
J 





图 13-10 ”Chrome 和 Firefox 中 的 number 型 input 元 素 
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13.4.2 用 input 元 素 获 取 指 定 范围 内 的 数值 


获取 数值 的 另 一 种 办 法 是 使 用 range 型 input 元 素 。 用 户 只 能 用 它 从 事先 规定 的 范围 内 选择 一 
个 数值 。range 型 input 元 素 支 持 的 属性 与 number 型 相同 ( 参见 表 13-8 ), 但 二 者 在 浏览 器 中 的 显示 
结果 不 同 。 代 码 清单 13-8 示 范 了 range 型 input 元 素 的 用 法 。 
代码 清单 13-8 使 用 range 型 input 元 素 

<!DOCTYPE HTML> 




















<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<p> 
<label for="name"> 
Name: «input value-"Adam" id-"name" name-"name"/» 
«/label» 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
<label for="fave"> 
Fruit: <input value="Apples" id="fave" name="fave"/> 
</label> 
</p> 
<p> 
<label for="price"> 
$ per unit in your area: 1 
<input type="range" step="1" min="0" max="100" 
value-"1" id-"price" name="price"/>100 
«/label» 
</p> 
<input type="submit" value="Submit Vote"/> 
</form> 
</body> 
</html> 


其 显示 结果 见 图 13-11 。 
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13.4.3 用 input 元 素 获 取 布 尔 型 输入 


图 13-11 使 用 range 型 input 元 素 

















checkbox 型 input 元 素 会 生成 供用 户 选 择 是 或 否 的 复 选 框 。 这 种 类 型 的 input 元 素 支 持 的 额外 





















































属性 如 表 13-9 所 述 。 
表 13-9 ”checkbox 型 input 元 素 可 用 的 额外 属性 
属 性 说 明 是 否 为 HTML5 新 增 
checked 设置 了 该 属性 的 复 选 框 刚 显 示 出 来 时 或 重 曙 表单 后 时 勾 选 状态 E cm 
required 表示 用 户 必须 勾 选 该 复 选 框 ， 否 则 无 法 通过 输入 验证 。 详 见 第 14 章 是 
value 设 定 在 复 选 框 呈 勾 选 状态 时 提交 给 服务 器 的 数据 值 。 默 认为 on f 








代码 清单 13-9 示 范 了 checkbox 型 input 元 素 的 用 法 。 


代码 清单 13-9 用 :input 元 素 生成 复 选 框 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 


<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«/head» 
«body» 


<form method="post" action-"http://titan:8080/form"» 
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<p> 
<label for="name"> 
Name: «input value-"Adam" id="name" name="name" /> 


</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
<label for="fave"> 
Fruit: «input value-"Apples" id="fave" name="fave"/> 
</label> 
</p> 
<p> 
«label for="veggie"> 
Are you vegetarian: <input type="checkbox" id-"veggie" name="veggie"/> 
</label> 
</p> 
<input type="submit" value="Submit Vote"/> 
</form> 
</body> 


</html> 
其 显示 结果 如 图 13-12 所 示 。 
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Name: Adam 
Password: 
Fruit: Apples 


Are you vegetarian: [| 


Submit Vote 





























图 13-12 ”用 input 元 素 生成 复 选 框 


checkbox 型 input 元素 的 不 足 之 处 在 于 : 提交 表单 时 , 只 有 处 于 勾 选 状态 的 复 选 框 的 数据 值 会 
发 送 给 服务 器 。 因 此 ， 要 是 表单 状态 在 如 图 13-12 时 提交 它 ， 那 么 从 Node.js 脚 本 得 到 的 反馈 结果 
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会 是 图 13-13 中 的 样子 。 
y © Post data x €E 
€ CŒ | © titan:8080/form wal 








Form Data 

















图 13-13 ”前 一 个 图 中 的 表单 提交 的 数据 项 

注意 ， 图 中 能 看 到 密码 框 的 值 ， 但 找 不 到 复 选 框 的 值 。checkbox 型 input 元 素 的 数据 项 如 果 

不 存在 , 那 就 表明 用 户 没 有 勾 选 这 个 复 选 杠 ; 反之 , 该 数据 项 如 果 存 在 ， 那 就 表明 用 户 勾 选 了 这 
个 复 选 框 ， 如 图 13-14 所 示 。 
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Password: [Min 6 characters 





Fruit: Apples 








Are you vegetarian: V] 








Submit Vote 

















图 13-14 ”在 勾 选 复 选 框 的 情况 下 提交 表单 





13.4.4 用 input 元 素 生 成 一 组 固定 选项 
radio 型 input 元 素 可 以 用 来 生成 一 组 单 选 按钮 ， 供 用 户 从 一 批 固 定 的 选项 中 作出 选择 。 它 适 
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合 于 可 用 有 效 数据 不 多 的 情况 。 表 13-10 介 绍 了 这 种 类 型 的 input 元 素 支 持 的 额外 属性 。 
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表 13-10 ”radio 型 input 元 素 可 用 的 额外 属性 









































属 性 说 明 是 否 为 HTML5 新 增 

checked 设置 了 该 属性 的 单 选 按钮 刚 显示 出 来 时 或 重 置 表单 后 呈 选 定 状态 8 

required 表示 用 户 必须 在 一 组 单 选 按 钮 中 选择 一 个 ， 否 则 无 法 通过 输入 验证 。 详 是 
见 第 14 章 

value 设 定 在 单 选 按钮 呈 选 定 状 态 时 提交 给 服务 器 的 数据 值 8 














每 一 个 radio 型 input 元 素 代表 着 提供 给 用 户 的 一 个 选项 。 要 生成 一 组 互 斥 的 选项 ， 只 消 将 所 
有 相关 input 元 素 的 name 属 性 设置 为 同一 个 值 即 可 。 代 码 清单 13-10 示 范 了 这 个 做 法 。 

















代码 清单 13-10 ”用 radio 型 input 元 素 生 成 一 组 固定 选项 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<p> 
<label for="name"> 
Name: «input value-"Adam" id="name" name="name" /> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
<fieldset> 


<legend>Vote for your favorite fruit</legend> 
«label for="apples"> 
<input type="radio" checked value="Apples" id-"apples" 
name="fave"/> 
Apples 
</label> 
«label for="oranges"> 
<input type="radio" value-"Oranges" id-"oranges" name="fave"/> 
Oranges 
</label> 
<label for="cherries"> 


<input type="radio" value="Cherries" id="cherries" name="fave"/> 
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Cherries 

</label> 

</fieldset> 
</p> 

<input type="submit" value="Submit Vote"/> 
</form> 
</body> 
</html> 


此 例 使 用 了 三 个 radio 型 input 元 素 。 它 们 的 name 属 性 都 设置 为 fave， 以 便 浏 览 器 把 它们 关联 
起 来 。 这 样 一 来 , 选择 其 中 任何 一 个 按钮 都 会 取消 对 另外 两 个 按钮 的 选择 。 这 三 个 元 素 还 设置 了 
value 属 性 值 ， 提 交 表 单 时 选 定 按钮 的 这 个 值 会 被 发 送 给 服务 器 。 例 中 使 用 的 人 fieldset 和 legend 
元 素 可 以 在 视觉 上 把 三 个 按钮 关联 在 一 起 ( 这 一 步 做 不 做 都 可 以 ，fieldset 和 legend 元 素 的 介绍 
见 第 12 章 )。 第 一 个 radio 型 input 元 素 设 置 了 checked 属 性 ， 这 样 这 组 选项 中 就 总 有 一 个 被 选中 。 
这 些 input 元 素 在 浏览 器 中 的 显示 结果 如 图 13-15 所 示 。 
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图 13-15 用 input 元 素 生 成 一 组 单 选 按钮 

此 例 中 总 有 一 个 单 选 按钮 会 被 选中 。 要 是 没有 设置 checked 属 性 而 用 户 又 没有 作出 任何 选择 的 
话 ， 就 不 会 有 哪个 按钮 被 选中 。 与 checkbox 型 input 元 素 类 似 : 未 选中 的 单 选 按钮 的 值 不 会 被 发 给 
服务 器 。 因 此 整 组 单 选 按钮 中 如 果 没 有 一 个 被 选中 的 话 ， 服 务 器 就 不 会 收 到 与 其 相关 的 数据 项 。 








13.4.5 FA input 元 素 获取 有 规定 格式 的 字符 串 
type 属 性 设置 为 email、tel 和 url 的 input 元 素 能 接受 的 输入 数据 分 别 为 有 效 的 电子 邮箱 地 址 、 
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电话 号 码 和 URL。 这 三 种 input 元 素 均 支持 表 13-11 所 示 的 额外 属性 。 
表 13-11 email 型 、tel 型 和 url 型 input 元 素 可 用 的 额外 属性 







































































































































































属 性 说 明 是 否 为 HTML 新 增 
list 指定 为 文本 框 提供 建议 值 的 datalist 元 素 ,， 其 值 为 datalist 元 素 的 id 值 , TÉ 是 
见 13.1.3 节 
maxlength 设 定 用 户 能 够 在 文本 框 中 输入 的 字符 的 最 大 数目 ， 详 见 13.1.1 节 f 
pattern 指定 一 个 用 于 输入 验证 的 正则 表达 式 ， 详 见 第 14 章 是 
placeholder 指定 关于 所 需 数据 类 型 的 提示 ， 详 见 13.1.2 节 是 
readonly 用 来 将 文本 框 设 为 只 读 以 阻止 用 户 编辑 其 内 容 f 
required 表示 用 户 必须 提供 一 个 值 ， 否 则 无 法 通过 输入 验证 ， 详 见 第 14 章 是 
size 通过 指定 文本 框 中 可 见 的 字符 数目 设 定 其 宽度 ， 详 见 13.1.1 节 f 
value 间 定 元 素 的 初始 值 ， 详 见 13.1.2 节 。 对 于 email 型 input 元 素 ， 其 值 可 能 是 单 A 
个 邮箱 地 址 ， 也 可 能 是 以 逗号 分 隔 的 多 个 邮箱 地 址 








email 型 jnput 元 素 还 支持 一 个 名 为 multiple 的 属性 。 设置 了 该 属性 的 input 元 素 可 以 接受 多 个 
电子 邮箱 地 址 。 代 码 清单 13-11 示 范 了 这 三 种 类 型 的 input 元 素 的 用 法 。 

















代码 清单 13-11 使 用 email 型 、tel 型 和 url 型 input 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«p» 
«label for="name"> 
Name: «input value-"Adam" id-"name" name-"name"/» 
«/label» 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
<label for="email"> 
Email: <input type="email" placeholder="user@domain.com" 
id="email" name="email"/> 
</label> 
</p> 
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<p> 
<label for="tel"> 
Tel: «input type-"tel" placeholder=" (XXX) -XXX-XXXX" 
id="tel" name="tel"/> 
</label> 
</p> 
<p> 
<label for="url"> 
Your homepage: «input type-"url" id="url" name="url"/> 
«/label» 
</p> 
<input type="submit" value="Submit Vote"/> 
</form> 
</body> 
</html> 


这 三 种 input 元 素 都 显示 为 普通 文本 框 的 样子 ， 它 们 只 有 在 提交 表单 的 时 候 才 会 检查 用 户 答 
入 的 数据 。 这 是 HTML5 中 新 增 的 输入 数据 检查 功能 之 一 〈 该 功能 的 全 面 介 绍 见 第 14 章 )， 至 于 检 
查 的 效果 则 各 有 不 同 。 所 有 主流 浏览 器 都 支持 email 型 input 元 素 ， 并 能 正确 识别 有 效 的 电子 邮箱 
地 址 。 而 url 型 input 元 素 则 时 灵 时 不 灵 。 有 些 浏览 絮 会 在 用 户 输入 的 值 前 加 上 一 个 http:W 了 事 ; 
有 些 浏览 器 会 要 求 用 户 输入 一 个 以 http:/ 开 头 的 值 ， 但 不 会 检查 后 面 的 部 分 ;还 有 一 些 浏览 咒 干 
脆 来 者 不 拒 ， 把 用 户 输入 的 任何 值 都 拿 去 提交 。 浏 览 器 对 tel 型 input 元 素 的 支持 是 最 差 的 。 在 撰 
写本 书 时 ， 还 没有 哪 种 主流 浏览 絮 会 对 电话 号 码 格式 进行 检查 。 

































































13.4.6 FA input 元 素 获取 时 间 和 日 期 


HTML5 中 增加 了 一 些 input 元 素 的 新 类 型 , 供用 户 输入 日 期 和 时 间 。 表 13-12 介 绍 了 这 些 类 型 
的 input 元 素 。 
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表 13-12 ”用 来 获取 时 间 和 日 期 的 input 元 素 类 型 













































































type 属 性 值 说 明 m 例 
datetime 获取 世界 时 日 期 和 时 间 ， 包 括 时 区 信息 2011-07-19T16:49:39.491Z 
datetime- local 获取 本 地 日 期 和 时 间 (不 含 时 区 信息 ) 2011-07-19T16:49:39.491 
date 获取 本 地 日 期 ( 不 含 时 间 和 时 区 信息 ) 2011-07-20 
month 获取 年 月 信息 (不 含 日 、 时 间 和 时 区 信息 ) 2011-08 
time 获取 时 间 17:49:44.746 
week 获取 当前 星期 2011-W30 




















日 斯 和 时 间 是 出 了 名 的 难 缠 的 问题 。 很 遗憾 ， 有 关 这 些 新 input 元 素 类 型 的 规范 离 理 想 状 态 
还 有 十 万 八 千里 。 规 范 中 的 日 期 格式 来 自 时 间 截 格式 规定 得 非常 严格 的 RFC 3339 (参见 
http://tools.ietf.org/html/rfc3339 )。 这 与 实际 使 用 中 的 〈 也 是 用 户 料 想 的 ) 许多 地 方 性 日 期 格式 大 
相 径 庭 。 例 如 ,很 少 有 人 会 知道 datetime 格 式 中 的 T 表 示 时 间 段 的 开始 ， 以 及 其 中 的 Z 表 示 Zulu 时 
区 。 表 13-12 介 绍 的 所 有 input 元 素 类 型 都 支持 表 13-13 中 的 额外 属性 。 
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表 13-13 ”用 于 输入 日 期 和 时 间 的 input 元 素 可 用 的 额外 属性 
































gm 性 说 明 是 否 为 HTML5 新 增 
list 指定 为 文本 框 提供 建议 值 的 datalist 元 素 ， 其 值 为 datalist 元 素 的 id 值 ， 详 见 13.1.3 节 是 
min 设 定 可 接受 的 最 小 值 ( 也 是 下 调 按钮 [ 如 果 有 的 话 ] 的 下 限 ) 以 便 进行 输入 验证 ， 是 


输入 验证 的 介绍 详 见 第 14 章 
max 设 定 可 接受 的 最 大 值 ( 也 是 上 调 按钮 【如 果 有 的 话 ] 的 上 限 ) 以 便 进行 输入 验证 。 
输入 验证 的 介绍 详 见 第 14 章 
readonly 用 来 将 文本 框 设 为 只 读 以 阻止 用 户 编辑 其 内 容 
required — 表示 用 户 必须 提供 一 个 值 ， 否 则 无 法 通过 输入 验证 。 详 见 第 14 章 
step 指定 上 下 调节 值 的 步 长 
value 指定 元 素 的 初始 值 





































































































代码 清单 13-12 示 范 了 date 型 input 元 素 的 用 法 。 
代码 清单 13-12 ”使 用 date 型 input 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 





«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«p» 
«label for="name"> 
Name: «input value-"Adam" id-"name" name-"name"/» 
«/label» 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id-"password" name-"password"/» 
«/label» 
</p> 
<p> 
<label for="fave"> 
Fruit: <input value="Apples" id="fave" name="fave"/> 
</label> 
</p> 
<p> 
«label for-"lastbuy"» 
When did you last buy: «input type-"date" 
id-"lastbuy" name-"lastbuy"/» 
«/label» 
</p> 


<input type="submit" value="Submit Vote"/> 
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</form> 
</body> 
</html> 


支持 这 种 新 型 input 元 素 的 浏览 器 曲 指 可 数 。 在 撰写 本 书 时 , 在 这 方面 表现 最 出 色 的 是 Opera， 
它 提供 了 一 个 日 期 选择 工具 ， 如 图 13-16 所 示 。 














Opera (=|) x) 
| B Example x E x 
e > dD O= | @ Web | titan/listings/example.htn 
Name: Adam 


| Password: Min 6 characters 
Favourite Fruit: 


! When did you last buy: 2011-07-14 ~ 





— (4 July »}| 2011 S 
Submit Vote o e - 
Mon Tue Wed Thu Fri Sat Sun 
27 28 29 1 2 3 

ES 
Bes O41 5 6 7 s 9 0 
112 17 15 16 17 





18 19 20 21%22 23 24 
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x ) 

113-16 ”在 Opera 中 选择 日 期 

对 这 类 input 元 素 的 支持 接 下 来 就 算 Chrome 做 得 较 好 了 。 它 会 生成 一 个 与 number 型 input 元 素 

一 样 的 文本 框 。 这 种 文本 框 带 有 向 上 和 向 下 的 箭头 形 的 小 按钮 ， 分 别 用 来 往 后 和 往 前 调整 时 间 。 

至 于 其 他 的 浏览 器 ,它们 只 是 显示 一 个 单行 文本 框 了 事 , 让 用 户 自己 去 琢磨 该 输入 些 什么 。 这 样 

的 局 面 以 后 肯定 会 得 到 改观 , 不 过 , 在 此 之 前 最 好 还 是 求助 于 jQuery 之 类 的 主流 JavaScript 库 提供 
的 日 历 选择 工具 。 


13.4.7 用 input 元 素 获取 颜色 值 
color 型 input 元 素 只 能 用 来 选择 颜色 。 这 种 类 型 的 input 元 素 还 支持 13.1.3 节 讲 过 的 list 属 性 。 
这 种 input 元 素 中 的 颜色 值 以 7 个 字符 的 格式 表示 : 以 # 开 头 ， 接 下 来 是 三 个 两 位 十 六 进 制 数 ， 
它们 分 别 代表 红 、 绿 、 蓝 三 种 原色 的 值 ( 如 姓 F1234 )。CSS 中 的 颜色 名 (如 red 和 black ) 不 能 
在 这 里 。 代 码 清单 13-13 示 范 了 这 种 input 元 素 的 用 法 。 







































































代码 清单 13-13 ”使 用 color 型 input 元 素 


<!DOCTYPE HTML» 
<html> 
<head> 
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<title>Example</title> 

<meta name="author" content="Adam Freeman"/> 

«meta name-"description" content="A simple example"/» 

«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


</head> 
<body> 
<form method="post" action-"http://titan:8080/form"» 
<p> 
«label for="name"> 
Name: <input value="Adam" id="name" name="name"/> 
</label> 
</p> 
<p> 
«label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
<label for="fave"> 
Favorite Fruit: <input type="text" id="fave" name="fave"/> 
</label> 
</p> 
<p> 
<label for="color"> 
Color: <input type="color" id="color" name="color"/> 
</label> 
</p> 
<input type="submit" value="Submit Vote"/> 
</form> 
</body> 
</html> 





大 多 数 浏览 器 都 没有 为 这 种 input 元 素 提 供 特别 的 支持 。Chrome 会 让 用 户 输 入 一 个 值 ， 并 在 
执行 输入 验证 〈 见 第 14 章 ) 时 报告 发 现 的 格式 错误 。 这 方面 表现 最 出 色 的 是 Opera， 它 会 显示 一 
个 简单 的 颜色 选择 工具 ， 该 工具 还 能 展开 成 一 个 完备 的 颜色 选择 对 话 框 ， 如 图 13-17 所 示 。 

U Opera (co 8) m 


Ii exemple 
和 > 2 ®© Web | titan listings exd 















Name: Adam 
Password: | Min 6 characters 
Favorite Fruit: 


Color: lj ~ 












































图 13-17 Opera 中 的 颜色 选择 工具 
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13.5 FA input 元 素 获取 搜索 用 词 


search 型 input 元 素 会 生成 一 个 单行 文本 框 ， 供 用 户 输入 搜索 用 词 。 这 种 input 元 素 有 点 与 众 
不 同 , 它 实际 上 什么 事 都 不 做 。 它 既 不 会 对 用 户 输入 的 数据 作出 限制 ,也 没有 诸如 搜索 本 页 或 借 
助 用户 的 默认 搜索 引擎 进 行 搜索 这 样 的 功能 。 这 类 input 元 素 支 持 的 额外 属性 与 text 型 input 元 素 
相同 ， 代 码 清单 13-14 示 范 了 其 用 法 。 


代码 清单 13-14 使 用 search 型 input 元 素 
<!DOCTYPE HTML> 





ni 








«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<p> 
<label for="name"> 
Name: <input value-"Adam" id-"name" name="name"/> 
«/label» 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
«label for="fave"> 
Favorite Fruit: <input type="text" id="fave" name="fave"/> 
</label> 
</p> 
<p> 
«label for="search"> 
Search: «input type-"search" id="search" name="search"/> 
«/label» 
</p> 
<input type="submit" value="Submit Vote"/> 
</form> 
</body> 
</html> 




















浏览 器 可 以 设法 用 这 种 文本 框 的 外 观 表 明 它 是 用 来 获取 搜索 用 词 的 。Chrome 的 做 法 是 先 显 
示 一 个 标准 的 文本 框 ， 一 旦 用 户 在 其 中 输入 了 内 容 ， 就 再 显示 一 个 取消 图 标 ， 如 图 13-18 所 示 。 
在 撰写 本 书 时 ， 其 他 浏览 器 都 将 这 种 input 元 素 作为 常规 的 text 型 input 元 素 处 理 。 
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Name: Adam 

Password: 

| Favorite Fruit: 

Search: | apples pears| E x | 
-— — = 


图 13-18 ”显示 在 Chrome 中 的 search 型 input 元 素 
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13.6 FA input 元 素 生 成 隐藏 的 数据 项 


有 时 设计 者 会 希望 使 用 一 些 用 户 看 不 到 或 不 能 编辑 的 数据 项 ,但 又 要 求 提交 表单 时 也 能 将 其 发 
送 给 服务 器 。 下 面 举 个 常见 的 例子 。Web 应 用 程序 让 用 户 查看 并 编辑 一 些 数据 库 记 录 时 ,往往 需要 









































用 一 种 简便 易 行 的 方法 将 主键 保存 在 网 页 上 以 便 知道 用 户 编 辑 的 是 哪 条 记录 ,但 是 又 不 想 让 用 户 看 
到 它 。hidden 型 input 元 素 可 以 用 来 达到 这 个 目的 。 代 码 清单 13-15 示 范 了 这 种 input 元 素 的 用 法 。 








代码 清单 13-15 ”生成 hidden 型 input 元 素 
<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 


<form method="post" action="http://titan:8080/form" > 
<input type="hidden" name="recordID" value="1234"/> 
<p> 
<label for="name"> 
Name: «input value-"Adam" id="name" name="name" /> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters 
id="password" name="password"/> 
</label> 
</p> 


13.6 ”用 input 元 素 生成 隐藏 的 数据 项 283 





<p> 

<label for="fave"> 
Favorite Fruit: <input type="text" id="fave" name="fave"/> 

</label> 

</p> 

<input type="submit" value-"Submit Vote"/> 

</form> 
</body> 
</html> 


此 例 中 使 用 了 一 个 hidden 型 input 元 素 。 其 name 和 value 属 性 的 值 分 别 设置 为 recordID 和 1234。 
浏览 器 显示 这 个 页 面 时 不 会 显示 该 元 素 ， 如 图 13-19 所 示 。 
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"c [2]. = 
J Example x NS à 
€ > Q | Oltitan/listings/examplehtm! W | 入 
Name: Adam ] 
Password: oon 


Favorite Fruit: Apples 














图 13-19 ”含有 一 个 hidden 型 input 元 素 的 网 页 


用 户 提交 表单 时 ， 浏 览 带 会 将 那个 hidden 型 input 元 素 的 name 和 value 属 性 值 作为 一 个 数据 项 
纳入 发 送 内 容 。 上 图 中 的 表单 提交 后 来 自 Node.js 脚 本 的 反馈 信息 如 图 13-20 所 示 。 











Orain xa 
€ C. | © titan:8080/form XA 
Form Data 

















入 A 


图 13-20 来 自 服务 器 的 反馈 信息 显示 了 隐藏 的 数据 值 








警告 只 有 那些 出 于 方便 或 易 用 性 考虑 而 不 是 因为 机 密 或 涉及 安全 原因 需要 隐藏 的 数据 才 适 合 
使 用 这 种 input 元 素 。 用 户 只 要 查看 页 面 的 HTML 源 代码 就 能 看 到 隐藏 的 Input 元素， 而 且 
该 元 素 的 值 是 以 明文 形式 从 浏览 器 发 到 服务 器 的 。 大 多 数 Web 应 用 程序 框架 都 能 将 机 窗 
数据 安全 地 存放 在 服务 器 上 ， 然 后 根据 会 话 标识 符 (一 般 使 用 cookie ) 将 请 求 与 它 关联 


13.7 用 input 元 素 生 成 图 像 按钮 和 分 区 响应 图 


image 型 input 元 素 生 成 的 按钮 显示 为 一 幅 图 像 , 点 击 它 可 以 提交 表单 。 这 种 类 型 的 input 元 素 
支持 的 额外 属性 如 表 13-14 所 示 。 


表 13-14 image 型 input 元 素 可 用 的 额外 属性 













































































































































































m 性 说 明 是 否 为 HTML5 新 增 
alt 提供 元 素 的 说 明文 字 。 对 需要 借助 残障 辅助 技术 的 用 户 很 有 用 f 
formaction 等 价 于 button 元 素 的 同名 属性 ， 参 见 第 12 诗 是 
formenctype 等 价 于 button 元 素 的 同名 属性 ， 参 见 第 12 诗 是 
formmethod 等 价 于 button 元 素 的 同名 属性 ， 参 见 第 12 寻 是 
formtarget T F buttonsc Re aE, RU 127 是 
formnovalidate SEF button tR WA PE, R58 125; 是 
height 以 像素 为 单位 设置 图 像 的 高 度 (不 设置 这 个 属性 的 话 图 像 将 以 其 本 身 f 

的 高 度 显示 ) 
src 指定 要 显示 的 图 像 的 URL f 
width 以 像素 为 单位 设置 图 像 的 宽度 (不 设置 这 个 属性 的 话 图 像 将 以 其 本 身 f 




















的 宽度 显示 ) 


代码 清单 13-16 示 范 了 image 型 input 元 素 的 用 法 。 


代码 清单 13-16 ”使 用 image 型 input 元 素 
<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 


<form method="post" action-"http://titan:8080/form"» 
<input type="hidden" name="recordID" value="1234"/> 
<p> 
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«label for="name"> 
Name: <input value="Adam" id-"name" name="name"/> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id-"password" name="password"/> 
</label> 
</p> 
<p> 
«label for="fave"> 
Favorite Fruit: <input type="text" id="fave" name="fave"/> 
</label> 
</p> 
<input type-"image" src-"accept.png" name="submit"/> 
</form> 
</body> 
</html> 


其 显示 结果 见 图 13-21。 
/ GQ Example VEN 


€ > C QOtitan/listings/examplehtm! vw * | 











Name: Adam 


Password: «+++ 








Favorite Fruit: Apples] 
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113-21 使 用 image 型 input 元 素 


点 击 图 像 按 钮 会 导致 浏览 器 提交 表单 ,在 发 送 的 数据 中 包括 来 自 那 个 jmage 型 input 元 素 的 
两 个 数据 项 , 它们 分 别 代 表 用 户 点 击 位 置 相对 于 图 像 左 上 角 的 x 坐标 和 y 坐 标 。 提交 上 图 中 的 表 
单 后 Node.js 脚 本 的 反馈 信息 如 图 13-22 所 示 。 从 中 可 以 看 到 浏览 器 发 送 了 一 些 什么 样 的 数 
据 值 。 

由 于 在 这 个 过 程 中 可 以 得 到 点 击 位 置 的 坐标 信息 , 所 以 可 以 让 图 像 中 的 不 同 区 域 代表 不 同 的 
操作 ， 然 后 根据 用 户 在 图 像 上 的 点 击 位 置 作出 相应 的 反应 。 
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图 13-22 ”提交 包含 图 像 按钮 的 表单 后 Node.js 脚 本 的 反馈 信息 


13.8 FA input 元 素 上 传 文件 


最 后 一 种 input 元 素 类 型 是 file 型 , 它 可 以 在 提交 表单 时 将 文件 上 传 到 服务 器 。 该 类 型 的 input 
元 素 支 持 的 额外 属性 如 表 13-15 所 示 。 


表 13-15 ”file 型 input 元 素 可 用 的 额外 属性 

















属 性 说 明 是 否 为 HTML5 新 增 
accept 指定 接受 的 MIME 类 型 。 关 于 MIME 类 型 的 定义 ， 参 见 RFC 2046 f 
( http://tools.ietf.org/html/rfc2046 ) 
multiple 设置 这 个 属性 的 input 元 素 可 一 次 上 传 多 个 文件 。 在 撰写 本 书 时 ， 尚 无 主流 是 
浏览 器 支持 这 个 属性 
required 表明 用 户 必须 为 其 提供 一 个 值 ， 否 则 无 法 通过 输入 验证 。 详 见 第 14 章 是 





























代码 清单 13-17 示 范 了 file 型 input 元 素 的 用 法 。 


代码 清单 13-17 ”用 file 型 input 元 素 上 传 文件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 


13.8 用 input 元 素 上 传 文件 
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<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 


«/head» 
«body» 


«form method-"post" action-"http://titan:8080/form" 


enctype-"multipart/form-data"» 
«input type-"hidden" name-"recordID" value-"1234"/» 
«p» 
«label for-"name"» 
Name: «input value-"Adam" id-"name" name-"name"/» 
«/label» 
</p> 
<p> 
«label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
<label for="fave"> 
Favorite Fruit: <input type="text" id="fave" name="fave"/> 
</label> 


</p> 
<p> 
<input type="file" name="filedata"/> 

</p> 
<input type="submit" value-"Submit"/» 

</form> 

</body> 
</html> 


表单 编码 类 型 为 nultipart/form-data 的 时 候 才 能 上 传 文件 。 上 面 的 代码 清单 中 已 将 form 元 素 








的 enctype 属 必 


设置 为 该 值 。 这 种 input 元 素 的 显示 结果 如 图 13-23 所 示 。 





f - ; =] amA i 
j E example x Ve 


€ -3 C | O titan/listings/example.htm! wat 








Name: Adam 
Password: 

Favorite Fruit: 
Example.html 




















图 13-23 file 型 input 元 素 
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点 击 Choose File 按 钮 ， 就 会 打开 一 个 用 来 选择 文件 的 对 话 框 。 提 交 表 单 时 ， 所 选 文件 的 内 容 
会 被 发 送 给 服务 右 。 








13.9 小结 


本 章 介绍 了 多 种 类 型 的 input 元 素 的 用 法 ， 其 他 HTML 元 素 没有 哪个 有 如 此 之 多 的 功能 。 任 
何 需要 跟 用 户 互动 的 网 页 或 Web 应 用 系统 都 会 大 量 用 到 input 元 素 。 

下 一 章 将 要 介绍 的 是 其 他 一 些 用 在 表单 中 的 元 素 。HTML5 中 新 增 的 输入 验证 功能 也 放 到 这 
章 讲述 ， 这 种 功能 可 以 在 提交 表单 之 前 检查 用 户 输入 的 数据 类 型 是 否 符合 要 求 。 








其 他 表单 元 素 及 输入 验证 
































本 章 是 讲述 HTML 表 单 的 最 后 一 章 。 用 于 HTML 表 单 的 元 素 还 有 五 个 没有 讲 过 ， 本 章 将 逐 
介绍 。HTML5 中 增加 的 输入 验证 特性 也 放 在 本 音 介 绍 。 这 个 新 特性 可 以 用 来 约束 用 户 输入 的 数 
据 ， 并 在 约束 条 件 未 得 到 满足 时 阻止 提交 表单 。 表 14-1 概 括 了 本 章 内 容 。 


R141 本章 内 容 概 要 


























































































































问 题 解决 方案 代码 清单 
生成 一 系列 选项 供用 户 选 择 使 用 select 元 素 14-1、14-2 
对 select 元 素 中 的 选项 编组 全 用 optgroup 元 素 14-3 
获取 用 户 输 入 的 多 行文 字 使 用 textarea 元 素 14-4 
表示 计算 结果 例 用 output 元 素 14-5 
生成 公开 /私有 密 钥 对 使 用 keygen 元 素 = 
确保 用 户 为 表单 元 素 提供 了 一 个 值 使 用 required 属 性 14-6 
确保 输入 值 处 于 一 个 范围 内 使 用 min 和 max 属 性 14-7 
确保 输入 值 匹配 一 个 正则 表达 式 全 用 pattern 属 性 14-8, 14-9 
禁用 输入 验证 使 用 novalidate 或 formnovalidate 属 性 14-10 

















14.1 使 用 其 他 表单 元 素 


以 下 五 个 表单 元 素 前 面 还 没有 介绍 : select、optgroup 、textarea、output 和 keygen， 下 面 逐 
一 说 明 。 


14.1.1 生成 选项 列表 


select 元 素 可 以 用 来 生成 一 个 选项 列表 供用 户 选择 。 它 比 第 13 章 介绍 过 的 radiobutton 型 
input 元 素 更 紧凑 ， 更 适合 于 选项 较 多 的 情形 。 表 14-2 概 括 了 select 元 素 。 

该 元 素 的 name , disabled、form、autofocus 和 required 属 性 与 input 元 素 的 同名 属性 类 似 。size 
属性 用 来 设 定 要 显示 给 用 户 的 选项 数目 。 元 素 如 果 设 置 了 multiple 属 性 的 话 ,， 那么 用 户 就 能 一 次 
选择 多 个 选项 。 
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414-2 ”select 元 素 


元 素 select 

元 素 类 型 短语 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 短语 元 素 的 元 素 

局 部 属性 name, disabled, form, size, multiple, autofocus#llrequired 
AE option 和 optgroup 元 素 

祭 签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 form、autofocus 和 required 属 性 是 HTML5 新 增 的 

习惯 样式 无 ， 该 元 素 的 外 观 因 平台 和 浏览 器 而 异 
































提供 给 用 户 的 选项 由 option 元 素 定 义 。 它 就 是 在 第 13 章 中 与 datalist 元 素 搭配 使 用 的 那 种 
option 元 素 。 代 码 清单 14-1 示 范 了 select 和 option 元 素 的 用 法 。 


代码 清单 14-1 




















使 用 select 和 option 元 素 


<!DOCTYPE HTML> 


<html> 
<head> 


<title>Example</title> 

<meta name="author" content="Adam Freeman"/> 

«meta name-"description" content-"A simple example"/» 

«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«/head» 
«body» 


<form method="post" action-"http://titan:8080/form"» 


<input type="hidden" name="recordID" value="1234"/> 
<p> 
<label for="name"> 
Name: «input value="Adam" id="name" name="name"/> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
<label for="fave"> 
Favorite Fruit: 
<select id="fave" name="fave"> 
<option value="apples" selected label="Apples">Apples</option> 
<option value="oranges" label="Oranges">Oranges</option> 
<option value="cherries" label="Cherries">Cherries</option> 
<option value="pears" label="Pears">Pears</option> 
</select> 
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</label> 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


代码 清单 14-1 在 select 元 素 中 用 四 个 option 元 素 定义 了 提供 给 用 户 的 选项 。 其 中 第 一 个 
option 元 素 设置 了 selected 属 性 以 便 在 页 面 显示 出 来 时 被 自动 选中 。 例 中 的 select 元 素 的 初始 外 











观 和 option 元 素 的 显示 方式 如 图 14-1 所 示 。 
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| € > Œ Otitan/listings/e 















/ By Eam T8 
J 国 Bemp 


arr 
















Name: Adam 
Name: Adam 
Password: |! 


" Password: 
Favorite Fruit | Apples [x] 


Submit 

















€ > Œ Qtitan/listings/examplehtml vy * | 





























图 14-1 用 select 元 素 向 用 户 提供 一 系列 选项 











通过 设置 size 属 性 可 让 select 元 素 显示 多 个 选项 ， 设 置 multiple 属 性 则 可 让 用 户 一 次 选择 多 





个 选项 ， 如 代码 清单 14-2 所 示 。 
代码 清单 14-2 使 用 select 元 素 的 size 和 multiple 属 性 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«input type-"hidden" name-"recordID" value-"1234"/» 
«p» 
«label for-"name"» 
Name: «input value-"Adam" id-"name" name-"name"/» 
«/label» 
</p> 
<p> 
«label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
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id-"password" name="password"/> 
</label> 
</p> 
<p> 
«label for-"fave" style="vertical-align:top"> 
Favorite Fruit: 
«select id-"fave" name-"fave" size="5" multiple» 
«option value-"apples" selected label="Apples">Apples</option> 
«option value-"oranges" label-"Oranges"»Oranges«/option» 
«option value-"cherries" label="Cherries">Cherries</option> 
«option value-"pears" label-"Pears"»Pears«/option» 
</select> 
</label> 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


代码 清单 14-2 设 置 了 select 元 素 的 size 和 multiple 属 性 ， 其 效果 如 图 14-2 所 示 。 要 选择 多 个 
选项 ， 在 点 击 这 些 选项 时 应 按 住 Ctl 键 。 例 中 还 用 label 元 素 的 内 艇 样式 ( 见 第 4 章 ) 将 其 纵向 对 
齐 方式 改 为 与 select 元 素 顶 端 对 齐 〈 默认 情况 下 它 与 select 元 素 底 端 对 齐 ， 这 看 起 来 有 点 古怪 )。 
[ So} 
By Example 
€ > Q Otitan/listings/examplentm| w 














Name: Adam 
Password: 


Favorite Fruit Apples ~ 
Cherries 


[Subma | 











图 14-2 ”在 select 元 素 中 显示 和 选择 多 个 选项 
在 select 元 素 中 建立 结构 
optgroup 元 素 可 以 用 来 在 select 元 素 的 内 容 中 建立 一 定 的 结构 。 表 14-3 概 括 了 这 个 元 素 。 
表 14-3 optgroup 元 素 
元 素 optgroup 
元 素 类 型 无 
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CER) 
允许 具有 的 父 元 素 select 元 素 
局 部 属性 label, disabled 
内 容 option 元 素 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 B 
在 HTML5 中 的 变化 无 
习惯 样式 无 

















该 元 素 的 用 途 是 对 option 元 素 进行 编组 。 其 1abel 属 性 可 用 来 为 整 组 选项 提供 一 个 小 标题 ， 
而 disabled 属 性 则 可 用 来 阻止 选择 组 内 的 任何 选项 。 代 码 清单 14-3 示 范 了 optgroup 元 素 的 用 法 。 


代码 清单 14-3 ”使 用 optgroup 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<input type="hidden" name="recordID" value="1234"/> 
<p> 
«label for="name"> 
Name: <input value="Adam" id-"name" name="name"/> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters" 
id="password" name="password"/> 
</label> 
</p> 
<p> 
«label for-"fave" style-"vertical-align:top"» 
Favorite Fruit: 
«select id-"fave" name-"fave"» 
<optgroup label="Top Choices"> 
<option value="apples" label="Apples">Apples</option> 
«option value-"oranges" label-"Oranges"»Oranges«/option» 
«/optgroup» 
«optgroup label-"Others"» 
«option value-"cherries" label="Cherries">Cherries</option> 
«option value-"pears" label="Pears">Pears</option> 
«/optgroup» 
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</select> 
</label> 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


图 14-3 显 示 了 用 optgroup 元 素 对 选项 列表 进行 组 织 的 结果 。 该 元 素 加 入 的 选项 组 标题 只 起 组 
织 作用 ， 用 户 无 法 将 其 作为 选项 选中 。 











Example \ À 
€ 3 C Q titar/listings/examplehtm! Ye N 


Name: Adam 


Password: 


Favorite Fruit: | Apples - 


Top Choices 
[ Submit Apples 
ee Oranges 
Others 
Cherries À 
Pears | 




















图 14-3 ”使 用 optgroup 元 素 


14.1.2 ”输入 多 行文 字 
textarea 元 素 生 成 的 是 多 行文 本 相 


iral 





, 用 户 可 以 在 里 面 输入 多 行文 字 。 表 14-4 概 括 了 textarea 元 素 。 


表 14-4 ”textarea 元 素 

















元 素 textarea 

元 素 类 型 短语 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 短语 元 素 的 元 素 ， 但 通常 是 form 元 素 

局 部 属性 name, disabled, form, readonly, maxlength, autofocus, required, placeholder, dirname, 


rows, wrap#ilcols 


内 容 文本 ， 也 即 该 元 素 的 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 form、autofocus 、required 、placeholder 和 和 wrap 属性 是 HTML5 新 增 的 


习惯 样式 X 
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textarea 元 素 的 rows 和 cols 属 性 可 用 来 设置 其 大 小 。wrap 属 性 有 两 个 值 : hard 和 soft， 可 用 
来 控制 在 用 户 输入 的 文字 中 插入 换行 符 的 方式 。 其 他 属性 与 input 元 素 的 同名 属性 ( 见 第 12 章 、 
第 13 章 ) 用 法 相同 。 代 码 清 单 14-4 示 范 了 textarea 元 素 的 用 法 。 


代码 清单 14-4 ”使 用 textarea 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
</head> 
<body> 
<form method="post" action="http://titan:8080/form" > 
<input type="hidden" name="recordID" value="1234"/> 
<p> 
«label for="name"> 
Name: <input value="Adam" id-"name" name="name"/> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" placeholder="Min 6 characters 
id="password" name="password"/> 














</label> 
</p> 
<p> 
«label for-"fave" style-"vertical-align:top"» 
Favorite Fruit: 
«select id-"fave" name-"fave"» 
«optgroup label-"Top Choices"» 
«option value-"apples" label="Apples">Apples</option> 
«option value-"oranges" label-"Oranges"»Oranges«/option» 
</optgroup> 
«optgroup label-"Others"» 
«option value-"cherries" label="Cherries">Cherries</option> 
«option value-"pears" label-"Pears"»Pears«/option» 
</optgroup> 
</select> 
</label> 
</p> 
<p> 
«textarea cols="20" rows="5" wrap-"hard" id="story" 
name="story">Tell us why this is your favorite fruit</textarea> 











</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


这 个 代码 清单 中 的 textarea 的 宽 和 高 分 别 为 20 列 和 5$ 行 ， 其 显示 结果 如 图 14-4 所 示 。 
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ll bemple 
€ > QC |O titan/listings/example.htm! vg A 
Name: Adam 
Password: 
| 


Favorite Fruit Apples — [v] 


Tell us why this is 
your favorice fruit 


| Submit | 














图 14-4 ”使 用 textarea 元 素 











wrap 属 性 控制 着 提交 表单 时 在 文字 中 插入 换行 符 的 方式 。 其 值 设置 为 hard 时 将 会 插入 换行 
RE, 结果 是 所 提交 的 文字 中 每 一 行 的 字符 数 都 不 超过 cols 属 性 的 规定 。 


14.1.3 ”表示 计算 结果 
output 元 素 表 示 计 算 的 结果 。 表 14-5 概 括 了 这 个 元 素 。 


表 14-5 ” output 元 素 






































元 素 output 

元 素 类 型 短语 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 短语 元 素 的 元 素 
局 部 属性 name, form, for 

内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 output { display: inline; } 





代码 清单 14-5 示 范 了 output 元 素 的 用 法 。 
代码 清单 14-5 ”使 用 output 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
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<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form onsubmit-"return false" 
oninput-"res.value - quant.valueAsNumber * price.valueAsNumber"» 
<fieldset> 
<legend>Price Calculator</legend> 
<input type="number" placeholder="Quantity" id="quant" name="quant"/> x 
<input type="number" placeholder-"Price" id-"price" name="price"/> = 
<output for="quant name" name="res"/> 
</fieldset> 
</form> 
</body> 
</html> 


代码 清单 14-5 用 JavaScript 事 件 系统 生成 了 一 个 简单 的 计算 器 ( 关于 事件 的 介绍 详 见 第 30 章 )。 
例 中 使 用 了 两 个 numper 型 input 元 素 。 用 户 在 其 中 输入 数值 后 ， 两 个 input 元 素 的 值 相 乘 的 结果 会 
显示 在 output 元 素 中 。 其 显示 结果 如 图 14-5 所 示 。 


r 




















c 
/ M Example am i Bea 
€ 3 CŒ QOtitan/listings/example.html wtf 
Price Calculator 
122 i x [23] H| = 2806 
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图 14-5 ”使 用 output 元 素 


14.14 生成 公开 /私有 密 钥 对 
keygen 元 素 的 用 途 是 生成 公开 /私有 密 钥 对 。 这 是 公开 密 钥 加 密 技术 中 的 一 个 重要 功能 ， 公 开 密 
钥 是 包括 客户 端 证 书 和 SSL 在 内 的 众多 Web 安 全 技术 的 基础 。 提交 表单 时 , 该 元 素 会 生成 一 对 新 的 密 
钥 。 公 钥 被 发 给 服务 器 ， 而 私 钥 则 由 浏览 器 保留 并 存 人 用 户 的 密 钥 仓库 。 表 14-6 概 括 了 keygen 元 素 。 
表 14-6 ” ”keygen 元 素 





























元 素 keygen 

元 素 类 型 短语 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 短语 元 素 的 元 素 

局 部 属性 challenge、keytype、autofocus name, 、disabled 和 form 
内 容 无 

标签 用 法 虚 元 素 形式 




















是 否 为 HTML5 新 增 是 
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CH) 
在 HTML5 中 的 变化 无 
习惯 样式 无 








name 、disabled、form 和 autofocus 这 四 个 属性 的 用 法 与 input 元 素 的 同名 属性 ( 见 第 12 章 ) 相 
。keytype 属 性 的 用 途 是 指定 用 来 生成 密 钥 对 的 算法 , 不 过 它 支持 的 值 只 有 RSA 一 种 。challenge 
marten 定 一 条 与 公 钥 一 起 发 送 给 服务 需 的 密 钥 管 理 口 令 phrase )。 
浏览 器 对 这 个 元 素 的 支持 参差 不 齐 。 那些 支持 这 个 元 素 的 浏览 器 将 其 提供 给 用 户 的 方式 也 各 
不 相同 。 在 这 种 情况 得 到 改善 之 前 最 好 不 要 使 用 这 个 元 素 。 


14.2 ”使 用 输入 验证 


在 获取 用 户 输入 数据 的 时 候 , 得 到 的 有 可 能 是 一 些 不 堪 甫 用 的 东西 。 其 原因 可 能 是 用 户 输入 
出 错 ， 也 可 能 是 设计 者 没有 把 自己 想 要 的 数据 类 型 说 清楚 。 

HTML5 引 入 了 对 输入 验证 ( input validation ) 的 支持 。 设 计 者 可 以 告诉 浏览 器 自己 需要 什么 
类 型 的 数据 , 然后 浏览 器 在 提交 表单 之 前 会 使 用 这 些 信息 检查 用 户 bene VEU EU 
据 有 问题 ,浏览 器 会 提示 用 户 进行 更 正 ， 而 且 只 有 把 这 些 问 题解 决 之 后 才能 提交 表单 。 

在 浏 览 器 中 验证 输入 数据 不 是 什 AA fee SEL, 但 是 在 HTML5 之 前 要 这 样 做 只 能 使 用 
JavaScript 库 ， 比 如 jQuery 出 色 的 输入 验证 插件 。 在 HTML5 中 内 置 对 输入 验证 的 支持 固然 方便 ， 
不 过 应 该 看 到 ， 目 前 浏览 器 对 这 个 特性 的 文 持 还 不 成 熟 ， 也 不 太一 致 。 

在 浏览 器 中 验证 输入 数据 的 好 处 在 于 用 户 可 以 立刻 得 到 问题 反馈 。 要 不 然 用 户 就 得 先 提交 表 
单 ， 等 到 服务 器 回应 之 后 才能 处 理 其 发 现 的 问题 。 如 果 网 速 较 慢 而 且 服务 器 比较 繁忙 ， 这 个 过 程 

会 慢 得 让 人 心烦 。 
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警告 ”浏览 器 所 做 的 输入 验证 只 是 对 服务 器 所 做 验证 的 补充 ， 不 能 替代 后 者 。 首 先 ， 用 户 使 用 
的 浏览 器 未 必 能 正确 支持 输入 验证 。 第 二 ， 对 恶意 用 户 来 说 ， 设 计 一 个 脚本 程序 绕 过 验 
证 过 程 直 接 把 输入 数据 发 给 服务 器 只 是 小 菜 一 碟 。 


输入 验证 是 通过 表单 元 素 的 一 些 属性 控制 的 。 表 14-7 罗 列 了 表单 元 素 ( 及 input 元 素 的 各 种 
类 型 ) 对 各 种 验证 属性 的 支持 情况 。 
表 14-7 ”对 输入 验证 的 支持 
验证 属性 元 素 


required textarea, select, input (text, password, checkbox, radio, file, datetime, datetime-local, date, 























month, time, week, number, email, url, search/&tel?i! ) 





min, max input (datetime, datetime-local, date, month, time, week, number/& range?) ) 





pattern input (text, password, email, url, searchk&tel#! ) 
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14.2.1 ”确保 用 户 提 供 了 一 个 值 

最 简单 的 输入 验证 是 检查 用 户 是 否 提供 了 一 个 值 ， 这 正 是 required 属 性 的 用 途 。 对 某 个 元 素 
设置 这 个 属性 后 ,除非 用 户 已 经 为 其 提供 了 一 个 值 ， 否则 无 法 提交 表单 ,不 过 对 于 这 个 值 本 身 并 
没有 什么 限制 。 代 码 清单 14-6 示 范 了 required 属 性 的 用 法 。 


























代码 清单 14-6 ”使 用 required 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 


«body» 
<form method="post" action="http://titan:8080/form" > 


<input type="hidden" name="recordID" value="1234"/> 
<p> 
«label for="name"> 
Name : 
«input type-"text" required id-"name" name-"name"/» 
«/label» 
</p> 
<p> 
«label for="password"> 
Password: <input type="password" required 
placeholder-"Min 6 characters" id-"password" name="password"/> 
«/label» 
</p> 
<p> 
«label for="accept"> 
<input type="checkbox" required id="accept" name="accept"/> 
Accept Terms & Conditions 
</label> 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 
代码 清单 14-6 中 分 别 在 三 个 不 同类 型 的 input 元 素 上 设置 了 required 属 性 。 除 非 为 这 三 个 元 素 
都 提供 输入 值 ， 否则 用 户 无 法 提交 表单 。 对 于 text 和 password 型 input 元 素 , 用 户 必 须 在 文本 框 中 


输入 文字 ; 对 于 checkbox 型 input 元 素 ， 用 户 必 须 色 选 对 应 的 复 选 框 。 











| 





提示 用 value 属 性 提供 的 初始 值 可 以 满足 required 验 证 属性 的 要 求 。 如 果 想 强迫 用 户 输 入 一 个 
值 ， 应 该 考虑 使 用 placeholder 属 性 。 关 于 value 和 placeholder 属 性 的 介绍 参见 第 13 章 。 





支持 输入 验证 的 浏览 器 在 这 方面 采用 的 具体 做 法 略 有 差异 , 不 过 其 结果 大 体 一 致 : 用 户 点 击 
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属性 却 没有 获得 





按钮 提交 表单 时 ,第 


一 个 设置 了 required 














户 的 注意 ; 然后 用 户 可 以 补 上 遗漏 的 数据 再 提交 表单 。 如 果 还 有 其 他 数据 遗漏 未 填 














偷 入 值 的 元 素 会 被 突出 显示 ， 以 引起 用 

















， 那么 下 一 个 


被 漏 掉 的 元 素 又 会 被 突出 显示 。 这 个 过 程 一 直 持 续 到 用 户 为 所 有 设置 了 required 属 性 的 元 素 都 提 








供 了 输入 值 才 结 束 。Chrome 吸 引用 户 注意 有 问题 的 元 素 的 方式 如 


图 14-6 所 示 。 
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By Example 
e32 C 


O titan/listings/example.htm 


Name: 


| z 
Passwo] Please fill out this field. | 


回 Accept Terms & Conditions 








c... lm 


wit 





J 























j 户 注意 





图 14-6 ”Chrome 提 醒 


个 必须 填写 的 数据 项 
HTML5 对 输入 验证 的 支持 还 很 简陋 , 在 习惯 了 jQuery 等 JavaScript 库 提供 的 丰富 功能 的 人 看 来 更 是 


























如 此 。 例 如 ， 使 用 HTML5 的 输入 验证 功能 时 ， 存 在 的 问题 是 依次 向 用 户 提示 的 ， 所 以 如 果 表 单 中 存 
在 多 处 问题 ， 那 么 用 户 就 不 得 不 每 提交 一 次 表单 才能 发 现 并 改正 一 个 错误 ， 像 剥 洋 萄 一 样 一 层 一 层 











地 做 下 去 。 浏 览 器 不 能 把 所 有 验证 错误 
14.2.2 ”确保 输入 值 位 于 某 个 范围 内 


次 性 地 告知 用 户 ， 而 且 错 误 提 示 的 外 观 也 不 受 设 计 者 控制 。 








min 和 和 max 属性 可 以 用 来 确保 输入 的 数值 和 日 期 数据 处 于 指定 的 范围 
如 何在 number 型 input 元 素 中 使 用 这 些 属性 。 











代码 清单 14-7 使 用 min 和 max 属 性 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" 
«/head» 
«body» 


<form method="post" action-"http://titan:8080/form"» 
<input type="hidden" name="recordID" value="1234"/> 
<p> 
<label for="name"> 
Name: 
<input type="text" id="name" name="name"/> 





内 。 代 码 清单 14-7 示 范 了 





/> 
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</label> 
</p> 
<p> 
«label for="password"> 
Password: <input type="password" 
placeholder="Min 6 characters" id="password" name="password"/> 
</label> 
</p> 
<p> 
«label for="price"> 
$ per unit in your area: 
<input type="number" min="0" max="100" 
value-"1" id-"price" name="price"/> 
«/label» 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


这 两 个 属性 不 要 求 同 时 使 用 。 只 设置 max 属 性 表示 输入 值 有 一 个 上 限 ， 只 设置 min 属性 表示 输 
入 值 有 一 个 下 限 。 要 是 两 个 属性 同时 使 用 , 则 对 两 头 都 施加 了 限制 , 从 而 设 定 了 一 个 输入 值 范围 。 
min 和 Imax 值 包含 在 范围 之 内 。 如 果 把 max 设 置 为 100， 那 么 小 于 等 于 100 的 输入 值 都 符合 要 求 。 

浏览 器 报告 范围 验证 错误 的 方式 如 图 14-7 所 示 。 






























































= lela > 一 | 
Example € | 
le> Œ | QO titan/listings/example.html XA | 
Name: 
Password: (iVi 
$ per unit in your area: hol >F =: E 
Submit Value must be less than 
or equal to 100. 




















图 14-7 输入 值 范围 验证 错误 提示 


只 有 用 户 输 入 一 个 值 后 min 和 max 属 性 控制 的 输入 验证 才 会 起 作用 。 设 置 这 两 个 属性 的 文 
本 框 空 着 的 时 候 浏览 器 也 允许 用 户 提交 表单 。 因 此 min 和 max 属 性 常常 与 上 一 节 介 绍 的 
required 属 性 搭配 使 用 。 


14.2.3 ”确保 输入 值 与 指定 模式 匹配 
pattern 属 性 可 以 用 来 确保 输入 值 与 一 个 正则 表达 式 匹配 。 代 码 清单 14-8 示 范 了 pattern 属 性 
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的 用 法 。 
代码 清单 14-8 ”使 用 pattern 属 性 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«input type-"hidden" name-"recordID" value-"1234"/» 
«p» 
«label for="name"> 
Name : 
<input type="text" id="name" name="name" patternz"^.* .*$"/> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" 
placeholder-"Min 6 characters" id-"password" name="password"/> 
«/label» 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


代码 清单 14-8 中 用 一 个 简单 的 正则 表达 式 确保 用 户 输入 以 空格 分 隔 的 姓氏 和 名 字 。 这 个 方法 
未 将 世界 各 地 的 姓名 形式 都 考虑 在 内 , 算 不 上 验证 姓名 有 效 性 的 好 办 法 , 不 过 作为 演示 浏览 器 对 
这 种 输入 验证 的 支持 的 例子 倒 也 不 错 。 浏 览 器 报告 模式 验证 错误 的 方式 如 图 14-8 所 示 。 
& - | 回 f ES n 
J [A| Example CE = 
| € > Œ |Otitan/listings/example.htn vy | A 











Please match the 


requested format. 














图 14-8 ”输入 值 模式 检验 错误 提示 
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提示 只 有 用 户 输 入 一 个 值 后 pattern 属 性 控制 的 输入 检验 才 会 起 作用 。 设 置 该 属性 的 文本 框 空 
着 的 时 候 浏览 器 也 允许 用 户 提交 表单 。 因 此 该 属性 常常 与 本 章 前 面 介 绍 的 required 属 性 
搭配 使 用 。 


14.2.4 ”确保 输入 值 是 电子 邮箱 地 址 或 URL 
有 13 章 介绍 的 emai 计 和 ur1 型 Input 元素 可 以 分 别 用 来 确保 用 户 输入 的 值 是 有 效 的 电子 邮箱 地 


址 和 完全 限定 的 URIL 一 一 其 实 也 不 尽 然 ， 目 前 浏览 器 对 email 型 input 元 素 的 支持 还 算 差强人意 ， 
但 对 url 型 的 支持 就 有 点 草率 了 。 
把 pattern 属 性 与 这 些 类 型 的 input 元 素 结合 使 用 可 以 进一步 限制 用 户 输入 的 值 ( 例如， 只 限 


Lu 


输入 某 个 域 的 电子 邮箱 地 址 )。 代码 清单 14-9 示 范 了 这 种 用 法 。 




















NU 




















代码 清单 14-9 ”将 pattern 属 性 与 email 型 input 元 素 结合 使 用 


«IDOCTYPE HTML» 


«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<input type="hidden" name="recordID" value="1234"/> 
<p> 
«label for="name"> 
Name: 
<input type="text" id="name" name="name" pattern-"^.* .*$"/> 
</label> 
</p> 
<p> 
<label for="password"> 
Password: <input type="password" 
placeholder-"Min 6 characters" id-"password" name="password"/> 
«/label» 
</p> 
<p> 
«label for="email"> 
Email: <input type="email" placeholder="user@mydomain.com" required 
pattern=".*@mydomain.com$" id-"email" name-"email"/» 
«/label» 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 


</html> 
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代码 清单 14-9 中 使 用 了 三 种 输入 验证 特性 。 email 型 input 元 素 确 保 用 户 输入 的 是 一 个 有 效 


电子 邮箱 地 址 。required 属 性 确保 用 户 提 供 一 个 输入 值 。pattern 属 性 则 确保 月 








HP iii A BU HR T 


邮箱 属于 指定 的 域 (mydomain.com )。 这 样 使 用 email 型 input 元 素 和 该 pattern 属 性 看 似 功 能 
有 些 宛 余 ， 实 际 上 该 input 元 素 还 保证 了 输入 值 中 @ 符 号 之 前 的 所 有 内 容 符 合 电子 邮箱 地 址 的 
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有 时 候 , 设计 者 也 想 让 用 户 不 经 过 输入 内 容 验证 就 能 提交 表单 ,如 用 户 需要 在 中 途 保存 进度 
这 种 情况 。 此 时 设计 者 会 希望 他 们 能 够 将 已 经 输入 的 东西 一 古 脑 儿 保存 下 来 , 等 以 后 有 空 再 继续 








要 想 不 经 输入 验证 就 能 提交 表单 ， 
交 表 单 的 putton 或 input 元 素 的 formnov 
验证 。 


代码 清单 14-10 ”禁用 输入 验证 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content= 


后 续 工 作 。 要 是 保存 个 进度 还 得 先 纠 一 通 错 ， 那 也 未 免 太 令 人 郁闷 了 。 





可 以 设置 form 元 素 的 novalidate 属 性 ， 也 可 以 设置 用 来 提 


alidate 属 性 。 代 码 清单 14-10 示 范 了 如 何 禁 








日 表单 的 输入 








"Adam Freeman"/> 


«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«/head» 
«body» 


<form method="post" action-"http://titan:8080/form"» 
<input type="hidden" name="recordID" value="1234"/> 


<p> 
<label for="name"> 
Name: 


<input type="text" id="name" name="name" pattern-"^.* .*$"/> 


</label> 
</p> 
<p> 


<label for="password"> 


Password: <input 


type="password" 


placeholder-"Min 6 characters" id-"password" name="password"/> 


«/label» 
</p> 
<p> 
<label for="email"> 


Email: <input type="email" placeholder="user@mydomain.com" required 
pattern=".*@mydomain.com$" id-"email" name-"email"/» 


«/label» 
</p> 


<input type="submit" value="Submit"/> 
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<input type="submit" value="Save" formnovalidate/> 
</form> 
</body> 
</html> 


此 例 在 HTML 文档 中 添加 了 一 个 不 经 输入 验证 就 能 提交 表单 的 input 元 素 ， 用 户 可 以 用 它 保 
存 进 度 ( 当然 , 这 得 假定 在 服务 器 端 有 相应 的 安排 ,不 再 对 来 自 浏览 器 的 这 些 输入 值 进行 验证 )。 
14.4 ”小 结 


本 章 介 绍 了 先前 剩 下 未 讲 的 几 个 用 于 表单 中 的 元 素 ， 并 且 演 示 了 HTML5 中 新 增 的 输入 验证 


特性 。 











BRAAS 








在 这 一 章 里 ， 我 会 介绍 一 些 元 素 ， 你 可 以 用 它们 来 给 HTML 文 档 能 入 内 容 。 到 目前 为 止 ， 
我 的 重点 主要 是 放 在 用 HTML 元 素 给 文档 创建 结构 和 意义 上 。 这 一 章 里 的 元 素 让 你 可 以 丰富 这 
些 文档 。 





注意 ” 茶 些 用 于 嵌入 内 容 的 HTML5 元 素 会 在 本 书 别 的 位 置 进行 介绍 ， 详 情 请 参见 15.6 节 。 


表 15-1 提 供 了 本 章 概要 。 
表 15-1 本 章 内 容 概要 

















































































































问 题 解决 方案 代码 清单 
在 HTML 文 档 里 敬 入 图 像 使 用 img 或 object 元 素 15-1, 15-9 
创建 基于 图 像 的 超 链 接 在 a 元 素 里 使 用 img 元 素 15-2 
创建 客户 端 分 区 响应 图 将 img 或 object 元 素 与 nap 和 area 元 素 结合 使 用 15-3, 15-4, 15-10 
HRA —SKHTMLXCER 使 用 iframe 元 素 15-5 
通过 插件 嵌入 内 容 使 用 embed 或 object 元 素 15-6 ~ 15-8 
DERA EFX? 使 用 object 元 素 ， 用 它 的 name 属 性 定义 浏览 上 下 文 的 名 称 15-11 
不 通过 插件 蔡 入 音频 和 视频 ” ”使 用 audio、video、source 和 track 元 素 ， 参见 第 34 章 = 
在 HTML 文档 里 嵌入 图 形 使 用 canvas 元 素 ， 参 见 第 35 章 和 第 36 章 一 



































15.4 BARR 


img 元 素 允 许 我 们 在 HTML 文 档 里 般 入 图 像 。 表 15-2 概 述 了 这 个 元 素 ， 它 是 使 用 最 为 广泛 的 
HTML 元 素 之 一 。 





























CD 浏览 上 下 文 主要 针对 的 是 Web 浏 览 器 之 类 的 用 户 代理 ， 它 们 在 此 上 下 文中 呈现 一 个 或 多 个 pocument 对 象 。 























译 者 注 
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表 15-2 img 元 素 












































元 素 ing 

元 素 类 型 短语 元 素 

允许 具有 的 父 元 素 任何 可 能 包含 短语 内 容 的 元 素 

局 部 属性 src, alt, height, width, usemap、ismap 

内 容 X 

标签 用 法 虚 元 素 形式 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 border 、longdesc、name 、align、hspace 和 vspace 属 性 在 HTML5 已 被 废弃 
习惯 样式 无 








要 骸 人 一 张 图 像 需要 使 用 src 和 alt 属 性 ， 如 代码 清单 15-1 所 示 。 
代码 清单 15-1 tA KAR 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
Here is a common form for representing the three activities in a triathlon. 
«p» 
<img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/> 
</p> 
The first icon represents swimming, the second represents cycling and the third 
represents running. 
</body> 
</html> 








src HE TAIRA RURIVURL. ELPRO, Rihtiathonpgt ree T— EET 

个 相对 URL。alt 属 性 定义 了 img 元 素 的 备用 内 容 。 此 内 容 会 在 图 像 无 法 显示 时 呈现 ( 原因 也 许 是 

图 像 无 法 找到 ， 图 像 格式 不 被 浏览 器 支持 ， 或 者 用 户 所 用 的 浏览 器 或 设备 无 法 显示 图 像 ) 从 

图 15-1 可 以 看 到 这 张 图 像 。 
可 以 使 用 width 和 height 属 性 来 指定 ing 元 素 所 代表 图 像 的 尺寸 (单位 是 像素 ) 图 像 在 HTML 

标记 处 理 完毕 后 才 会 加 载 ， 这 就 意味 着 如 果 你 省 略 了 width 和 height 属 性 ， 浏 览 器 就 不 知道 该 为 

图 像 食 出 多 大 的 屏幕 空间 。 造 成 的 结果 是 ,浏览 器 必须 依赖 图 像 文件 本 身 来 确定 它 的 尺寸 ,然后 

重 定位 屏幕 上 的 内 容 来 容纳 它 。 这 可 能 会 让 用 户 感觉 到 晃动 ， 因 为 他 们 可 能 已 经 开始 阅读 HTML 

里 直接 包含 的 内 容 了 。 指 定 width 和 height 属 性 让 浏览 器 能 够 在 图 像 尚未 载 人 时 正确 所 放 网 页 里 

的 各 个 元 素 。 
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St) 
J Example x We 

€ > QC QOtitan/listings/example.html iX 
Here is a common form for representing the three activities in a 
triathlon. 





The first icon represents swimming, the second represents cycling 
and the third represents running. 




















图 15-1 用 img 元 素 艇 入 一 张 图 像 


警告 width 和 height 属 性 告诉 浏览 器 


YL & 


图 像 的 尺寸 有 多 大 ， 而 不 是 你 希望 它 有 多 大 。 不 应 该 使 用 
这 些 属 性 来 动态 缩放 图 像 。 


15.1.1 FRESE EB RARER 


img 元 素 的 一 个 常见 用 法 是 结合 a 元 素 ( 第 8 章 已 介绍 过 ) 创建 一 个 基于 图 像 的 超 链接 。 它 类 似 
表单 里 基于 图 像 的 提交 按钮 ( 在 第 12 章 介绍 过 )。 代 码 清单 15-2 展 示 了 如 何 结合 使 用 img 和 a 元 素 。 
代码 清单 15-2 ”使 用 img 和 a 元 素 创 建 服务 器 端的 分 区 响应 图 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 


Here is a common form for representing the three activities in a triathlon. 
«p» 
«a href-"otherpage.html"» 


<img src-"triathlon.png" ismap alt-"Triathlon Image" 
width-"200" height-"67"/» 
</a> 

</p> 


The first icon represents swimming, the second represents cycling and the third 
represents running. 

</body> 

</html> 
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ee 什么 不 同 , 正如 图 15-2 所 示 。 因 此 ， 重 要 的 一 点 是 要 向 用 户 
提供 视觉 提示 ， 表 明 特 定 图 像 所 代表 的 是 超 链 接 。 具 体 的 做 法 可 以 是 利用 CSS， 能 在 图 像 内 容 里 
e. 























J By Example x ap 
€ > C Otitan/listings/example.html 1 A 


Here is a common form for representing the three activities in a 
triathlon. 





The first icon represents swimming, the second represents cycling 
and the third represents running. 























图 15-2 FEER ik A— RAR 


如 果 点 击 这 张 图 像 ， 浏 览 器 会 导航 至 父 元 元 性 所 指定 的 URL 上 。 给 img 元 素 应 

ismap 属 性 就 创建 了 一 个 服务 器 端 分 区 响应 图 ， 意 思 是 在 图 像 上 点 击 的 位 置 会 附加 到 URL 上 。 is 

个 例子 ， 如 果 点 击 的 位 置 是 距 图 像 项 部 4 像素 ， z POM 浏览 需 就 会 导航 到 下 面 的 地 址 : 
http://titan/listings/otherpage.html? 10,4 

(很 明显 ， 这 个 URL 基 于 我 从 自己 的 开发 服务 器 titan 上 载 人 了 最 初 的 HTML 文 档 ， 而 a 元 素 上 的 

href 属 性 是 一 个 相对 URL。 ) 代码 清单 15-3 展 示 了 otherpage.html 中 的 内 容 ， 它 包含 了 一 个 简单 的 

脚本 ， 用 来 显示 点 击 位 置 的 坐标 。 


代码 清单 15-3  otherpage.html PAA 


<!DOCTYPE HTML> 
«html» 
«head» 
«title»Other Page</title> 
«/head» 
«body» 
<p>The X-coordinate is «b»«span id="xco">??</span></b></p> 
<p>The Y-coordinate is «b»«span id="yco">??</span></b></p> 
«script» 
var coords = window.location.href.split('?')[1].split(', '); 





























document.getElementById('xco').innerHTML = coords[0]; 
document.getElementById('yco').innerHTML = coords[1]; 
</script> 
</body> 
</html> 
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从 图 15-3 可 以 看 到 鼠标 点 击 产生 的 效果 。 
Í FII 
; © Other Page 
€ Q | O titan/listings/otherpage.html?10,4 wit 


The X-coordinate is 10 





| The Y-coordinate is 4 


x 


> 


n 











网 15-3 4 














包含 在 请 求 URL 之 中 。 
15.1.2 ”创建 客户 端 分 区 响应 图 


示 鼠 标 在 超 链接 内 藤 图 像 上 所 点 位 置 的 坐标 


服务 器 端 分 区 响应 图 通常 意味 着 服务 器 会 根据 用 户 在 图 像 上 点 击 
反应 ， 比 如 返回 不 同 的 响应 信息 。 如 果 省 略 了 img 元 素 上 的 ismap 








区 域 的 不 同 做 出 有 差别 的 
属性 ， 鼠 标点 击 的 坐标 就 不 会 被 





我 们 可 以 创建 一 个 客户 端 分 区 响应 图 , 通过 点 击 某 张 图 像 上 的 不 同 区 域 让 浏览 器 导航 到 不 同 











的 URL 上 。 这 
们 所 代表 的 行为 。 客 户 端 分 区 响应 






































过 程 不 需要 通过 服务 器 引导 ,因此 需要 使 用 元 素来 定义 图 像 上 的 各 个 区 域 以 及 它 
图 的 关键 元 素 是 map， 表 15-3 概 括 了 这 个 元 素 。 









































表 15-3 map 元 素 
元 素 map 
元 素 类 型 map 元 素 在 包含 短语 内 容 时 被 视 为 短语 元 素 ， 包 含 流 内 容 时 则 被 视 为 流 元 素 
允许 具有 的 父 元 素 任何 可 以 包含 短语 或 流 内 容 的 元 素 
局 部 属性 name 
内 容 一 个 或 多 个 area 元 素 
标签 用 法 开始 标签 和 结束 标签 
是 否 为 HTML5 新 增 ff 
在 HTML5 中 的 变化 如 果 使 用 了 id 属 性 ， 它 的 值 必须 和 name 属 性 相同 





map 元 素 包含 一 个 或 多 个 area 元 素 , 它们 各 自 代 表 了 图 像 上 可 被 点 击 的 一 块 区 域 。 表 15-4 概 述 














了 area 元 素 。 
表 15-4 ”area 元 素 
元 素 area 
元 素 类 型 短语 
允许 具有 的 父 元 素 map 元 素 
局 部 属性 alt、 href、 target、 rel、media 





、hreflang、type、shape、coords 
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(E) 
内 容 无 
标签 用 法 虚 元 素 形式 
是 否 为 HTML5 新 增 En 
在 HTML5 中 的 变化 rel 、media 和 hreflang 属 性 是 HTML5 中 新 增 的 。nohref 属 性 现 已 被 废弃 
习惯 样式 area { display: none; } 























area 元 素 的 属性 可 以 被 分 为 两 类 ， 第 一 类 处 理 的 是 area 所 代表 的 图 像 区域 被 用 户 点 击 后 浏览 
器 会 导航 到 的 URL。 表 15-5 介 绍 了 这 一 类 属性 ， 它 们 类 似 于 你 在 其 他 元 素 上 见 到 过 的 对 应 属性 。 


表 15-5 与 目标 地 址 相关 的 area 元 素 属性 













































































属 性 说 — HB 

href 此 区 域 被 点 击 时 浏览 器 应 该 加 载 的 URL 

alt 替代 内 容 ， 参 见 img 元 素 的 对 应 属性 

target 应 该 用 来 显示 URL 的 浏览 上 下 文 ， 参见 第 7 章 base 元 素 的 对 应 属性 

rel 述 了 当前 文档 和 目标 文档 之 间 的 关系 ， 参 见 第 7 章 1ink 元 素 的 对 应 属性 
media 此 MEER 的 媒介 ， 参 见 第 7 章 style 元 素 的 对 应 属性 

hreflang 目标 文档 的 语言 

type 目标 文档 的 MIME 类 型 























到 








第 二 类 则 包含 了 更 有 意思 的 属性 : shape 和 coords 属 性 。 可 以 用 这 些 属性 来 标明 用 户 可 以 点 
击 的 各 个 图 像 区 域 。shape 和 coords 属 性 是 共同 起 作用 的 。coords 属 性 的 意思 根据 shape 属 性 的 值 
而 定 ， 正 如 表 15-6 所 介绍 的 。 











Bl 

















#215-6 shape 和 coords 属 性 的 值 
















































































































































































shape 值 coords 值 的 性 质 和 意思 

rect 这 个 值 代表 了 一 个 矩形 区 域 。coords 属 性 必须 由 四 个 用 逗号 分 隔 的 整数 组 成 ， 它 们 代表 了 下 列 位 置 之 
间 的 距离 : 
口 图 像 的 左边 缘 与 矩形 的 左 侧 
口 图 像 的 上 边缘 与 矩形 的 上 侧 
O 图 像 的 左边 缘 与 矩形 的 右 侧 
O 图 像 的 上 边缘 与 矩形 的 下 侧 

circle 这 个 值 代 表 了 一 个 圆 形 区 域 。coords 属 性 必须 由 三 个 用 逗号 分 隔 的 整数 组 成 ， 它 们 代表 了 下 列 参数 : 
口 从 图 像 左边 缘 到 圆心 的 距离 
OQ 从 图 像 上 边缘 到 圆心 的 距离 
口 圆 的 半径 

poly 这 个 值 代表 了 一 个 多 边 形 。coords 属 性 必须 至 少 包 含 六 个 用 逗号 分 隔 的 整数 ， 每 一 对 数字 各 代表 多 边 
形 的 一 个 顶点 

default 这 个 值 的 意思 是 默认 区 域 ， 即 覆盖 整 张 图 片 。shape 属 性 使 用 这 个 值 时 不 需要 提供 coords 值 
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介绍 完 这 些 元 素 后 , 我 们 现在 来 看 一 个 例子 。 演示 分 区 响应 图 的 一 大 难点 是 area 元 素 在 浏览 
HUI LRAT. 出 于 这 个 目 H9, 图 15-4 展 示 了 两 个 我 想 在 这 个 例子 里 定义 的 区 域 , 使 用 的 是 前 




















一 节 里 的 triathlon.png 图 像 。 简 单 起 见 ， 我 把 这 两 个 区 域 做 成 矩形 。 


5px 62px 














15-4 ”规划 分 区 响应 图 中 的 各 个 区 域 
根据 这 张 示意 图 可 以 创建 map 和 area 元 素 ， 如 代码 清单 15-4 所 示 。 
代码 清单 15-4 ”创建 分 区 响应 图 


<!DOCTYPE HTML> 











<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
Here is a common form for representing the three activities in a triathlon. 
«p» 
<img src-"triathlon.png" usemap="#mymap" alt-"Triathlon Image"/» 
</p> 
The first icon represents swimming, the second represents cycling and the third 
represents running. 
<map name="mymap"> 
<area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/> 
«area href-"cyclepage.html" shape="rect" coords="70,5,130,62" alt-"Running"/» 
«area href-"otherpage.html" shape-"default" alt="default"/> 
</map> 
</body> 
</html> 























W 


请 注意 我 给 img 元 素 添加 的 usemap 属 性 。 这 个 属性 的 值 必须 是 一 个 井 号 囊 名 称 引 用 ( hash-name 
reference )， 意 思 是 一 个 由 # 字 符 开 头 的 字符 串 。 就 能 把 map 元 素 与 图 像 关 联 起 来 。 

如 果 用 户 点 击 了 图 像 上 的 游泳 部 分 , 浏览 器 就 会 导航 至 swimpage.html。 如 果 用 户 点 击 的 是 图 
eae eh iL Se Le 他 位 置 会 让 浏览 器 导航 至 
otherpage.html。 















































提示 “请 注意 ， 在 制作 客户 端 分 区 响应 图 时 ， 无 需 使 用 a 元 素来 显 式 创建 超 链接 。 
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15.2. ERA 8 —3K HTML 文档 
iframe 元 素 允 许 我 们 在 现 有 的 HTML Py RA IK CRY. d615-T48635 SIX TOC. 
表 15-7 iframe 元 素 



































元 素 iframe 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 包含 短语 内 容 的 元 素 

局 部 属性 src, srcdoc, name, width, height, sandbox, seamless 

内 容 字符 数据 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 sandbox 和 seamless 属 性 是 HTML5 新 增 的 。longdesc、 align, allowtransparency, frameborder, 
marginheight 、marginwidth 和 和 scrolling 属 性 已 被 废弃 

习惯 样式 iframe { border: 2px inset; } 





代码 清单 15-5 展 示 了 iframe 元 素 的 用 法 。 
代码 清单 15-5 ”使 用 iframe 元 素 


«IDOCTYPE HTML» 





«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«/head» 
«body» 
«header» 
«hi»Things I like</h1> 
«nav» 
«ul» 
<li> 
<a href-"fruits.html" target="myframe">Fruits I Like</a> 
</li> 
<li> 
<a href="activities.html" target-"myframe"»Activities I Like</a> 
</li> 
</ul> 
</nav> 
</header> 
<iframe name="myframe" width="300" height="100"> 
</iframe> 
</body> 


</html> 
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在 这 个 例子 里 ， 我 创建 了 一 个 name 属 性 为 myframe 的 iframe。 这 样 就 创建 了 一 个 名 为 myframe 
的 浏览 上 下 文 。 然 后 我 就 可 以 把 这 个 浏览 上 下 文 与 其 他 元 素 ( 具体 是 指 a、form、button、input 
和 base ) 的 target 属 性 结合 使 用 。 我 用 a 元素 创建 了 一 对 超 链接 ,它们 会 把 href 属 性 中 指定 的 URL 
载 和 iframe。 从 图 15-5 可 以 看 到 这 一 过 程 。 















































Example p | 
€ C Otita Bl Example i c Q* | O titan/listings/example.ht y | , 
€ CŒ | © titan/list 
| Things I I l T| Things I like 
| 4 Things I lik sA 
| * Apes T Lika > * FmitsI Like 


* Activities I Like 





Activities I like 





I like to swim, cycle and run. I am in training ~ 




















图 15-5 ”用 iframe 租 入 外 部 HTML 文 档 


width 和 height 属 性 指定 了 像素 尺寸 。src 属 性 指定 了 iframe 一 开始 应 该 载 和 人 并 显示 的 URL， 
而 srcdoc 属 性 让 你 可 以 定义 一 张 用 于 内 机 显示 的 HTML 文 档 。 

HTML5 引 入 了 两 个 新 的 iframe 元 素 属性 。 第 一 个 是 seamless， 它 指示 浏览 器 把 iframe 的 内 容 
显示 得 像 主 HTML 文 档 的 一 个 整体 组 成 部 分 。 从 图 中 可 以 看 出 ， 默 认 情 况 下 会 有 一 个 边框 ,如果 
内 容 比 width 和 height 属 性 所 指定 的 尺寸 要 大 ， 还 会 出 现 一 个 滚动 条 。 

第 二 个 属性 是 sandbox, 它 对 HTML 文 档 进行 限制 。 应 用 这 个 属性 时 如 果 不 附带 任何 值 , 就 像 
这 样 : 





















































<iframe sandbox name-"myframe" width="300" height="100"> 
</iframe> 


下 面 这 些 元 素 就 会 被 禁用 : 





口 脚本 
口 表单 
口 插件 
口 指向 其 他 浏览 上 下 文 的 链接 


男 外 , iframe 的 内 容 被 视 为 与 HTML 文 档 的 其 余部 分 来 源 不 同 , 这 样 会 引发 额外 的 安全 措施 。 
可 以 通过 定义 sandbox 属 性 的 值 来 独立 启用 各 种 功能 ， 就 像 这 样 : 








<iframe sandbox-"allow-forms" name-"myframe" width-"300" height="100"> 
«/iframe» 
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表 15-8 介 绍 了 可 以 使 用 的 值 。 不 幸 的 是 ， 在 我 创作 这 本 书 时 还 没有 哪 一 种 主流 浏览 器 支持 
sandbox 和 seamless 属 性 "， 因 此 我 无 法 演示 这 两 种 属性 。 


表 15-8 iframe 的 sandbox 属 性 所 接受 的 allow 值 









































m 说 明 

allow-forms 启用 表单 

allow-scripts 启用 脚本 

allow-top-navigation 允许 链接 指向 顶层 的 浏览 上 下 文 ， 这 样 就 能 用 另 一 个 文档 蔡 换 当前 整个 文档 ， 或 者 创建 
新 的 标签 和 窗 

allow-same-origin 人 允许 iframe 里 的 内 容 被 视 为 与 文档 其 余部 分 拥有 同一 个 来 源 位 置 

















15.3 ”通过 插件 能 入 内 容 


object 和 embed 元 素 最 初 都 是 作为 扩展 浏览 器 能 力 的 一 种 方式 , 用 于 添加 插件 支持 , 而 插件 能 
够 处 理 浏览 器 不 直接 支持 的 内 容 。 这 些 元 素 是 在 第 1 章 里 提 到 的 浏览 器 战争 时 期 被 引入 的 ， 分别 
来 自 于 不 同 的 阵营 。 

之 后 ，object 元 素 成 了 HTML4 规 范 的 一 部 分 ， 而 embed 元 素 却 没有 ( 尽管 embed 元 素 已 经 被 广 
泛 使 用 )。 为 了 公平 对 待 这 两 种 元 素 ，HTML5 添 加 了 对 embed 元 素 的 支持 。 这 样 ， 出 于 兼容 性 的 
缘故 ， 你 就 有 了 两 个 非常 相似 的 元 素 。 


虽然 object 和 embed 元 素 通 常用 于 插件 ， 但 它们 也 可 以 用 来 般 入 浏览 器 能 直接 处 理 的 内 容 ， 
比如 图 像 。 我 会 在 本 节 的 后 面部 分 向 你 演示 这 么 做 可 能 会 带 来 什么 益处 。 


15.3.1 使 用 embed 元 素 
我 将 从 embed 元 素 开始 ， 表 15-9 概 述 了 这 个 元 素 。 


表 15-9 embed 元 素 























































































































元 素 embed 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 

局 部 属性 src, type, height, width 

内 容 无 

标签 用 法 虚 许 元 素 形 式 

是 否 为 HTML5 新 增 是 ,不 过 多 年 来 已 经 作为 非 正式 元 素 被 广泛 使 用 
在 HTML5 中 的 变化 无 

习惯 样式 无 


























Q@ 到 目前 为 止 ，sandbox 属 性 已 被 nternet Explorer 10、Firefox 、Chrome 和 Safari 支 持 ，seamless 属 性 仍然 只 有 Chrome 
和 Safari 6 支持 。 一 一 译 者 注 





316 第 15 章 XXn 





代码 清单 15-6 展 示 了 embed 元 素 的 用 法 。 在 这 个 例子 里 ,我 般 入 一 个 来 自 www.youtube.com 的 
视频 ,里面 是 一 些 谷歌 工程 师 关 于 HTML5 的 谈话 。 


代码 清单 15-6 ”使 用 embed 元 素 


<!DOCTYPE HTML> 


<html> 
<head> 

<title>Example</title> 

<meta name="author" content="Adam Freeman"/> 

<meta name="description" content="A simple example"/> 

<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 

«/head» 
«body» 

«embed src-"http://www. youtube. com/v/qzA60hHca9s?version=3" 
type-"application/x-shockwave-flash" width-"560" height-"349" 
allowfullscreen-"true"/» 

</body> 
</html> 








sTc 属 性 指定 了 内 容 的 地 址 ， type 属性 则 指定 了 内 容 的 MIME 类 型 ， 这 样 浏览 器 就 知道 该 如 何 
处 理 它 。width 和 height 属 性 决定 嵌入 内 容 将 在 屏幕 上 占据 的 空间 大 小 。 你 应 用 的 其 他 任何 属性 
都 会 被 当做 是 插件 或 内 容 的 参数 。 在 这 个 例子 中 ， 我 应 用 了 一 个 名 为 allowfullscreen 的 属性 ， 
YouTube 的 视频 播放 融通 过 它 来 启用 全 屏 观看 功能 。 从 图 15-6 中 可 以 看 到 浏览 如 是 如 何 泻 染 这 一 
内 容 的 。 
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15.3.2 ”使 用 object 和 param 元 素 


object 元 素 实 现 的 效果 和 embed 元 素 一 相 
表 15-10 概 述 了 object 元 素 。 





,但 它 的 工作 方式 稍 有 不 同 ,并 带 有 一 些 额 外 的 功能 。 


TTE 








#215-10 ”object 元 素 


































































































元 素 object 

元 素 类 型 这 个 元 素 在 包含 短语 内 容 时 被 视 为 短语 元 素 ， 包 含 流 内 容 时 则 被 视 为 流 元 素 

允许 具有 的 父 元 素 任何 可 以 包含 短语 或 流 内 容 的 元 素 

局 部 属性 data, type, height, width, usemap, name, form 

内 容 空白 或 任意 数量 的 param 元 素 ， 并 可 选择 添加 短语 或 流 内容 作 为 备用 内 容 ， 参 见 本 节 后 面 
的 示例 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 fs 

在 HTML5 中 的 变化 form 属 性 是 HTML5 里 新 增 的 
archive, classid, code, codebase, codetype, declare, standby, align, hspace, vspace 
和 border 属 性 已 被 废弃 

习惯 样式 无 








代码 清单 15-7 展 示 了 如 何 用 object 元 素 能 和 前面 例子 中 的 YouTube 视 频 。 
代码 清单 15-7 使 用 object 和 param 元 素 的 属性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
«object width="560" height="349" 
data-"http: //www. youtube. com/v/qzA60hHca9s?version=3" 
type="application/x-shockwave-flash"> 
<param name="allowFullScreen" value="true"/> 
</object> 
</body> 
</html> 


data 属 性 提供 了 内 容 的 地 址 ，type、width 和 height 属 性 和 在 embed 元 素 里 的 意思 一 致 。 使 
用 param 元 素来 定义 将 要 传递 给 插件 的 参数 ， 每 个 需要 定义 的 参数 都 各 自 使 用 一 个 param 元 素 。 
表 15-11 概 述 了 这 个 元 素 。 你 可 能 已 经 猜 到 了 ，name 和 value 属 性 定义 了 参数 的 name 和 value。 
































表 15-11 param 元 素 











元 素 param 

元 素 类 型 无 

允许 具有 的 父 元 素 object 元 素 

局 部 属性 name, value 

标签 用 法 虚 元 素 形式 

是 否 为 HTML5 新 增 f 

在 HTML5 中 的 变化 无 

习惯 样式 param { display: none; } 
指定 备用 内 容 








object 元 素 的 一 大 优点 是 可 以 包含 备用 内 容 ， 在 指定 内 容 不 可 用 时 显示 出 来 。 代 码 清单 15-8 
提供 了 一 个 简单 的 演示 。 


代码 清单 15-8 使 用 object 元 素 的 备用 内 容 功能 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«object width="560" height="349" data="http://titan/myimaginaryfile"> 
<param name="allowFullScreen" value="true"/> 
<b>Sorry!</b> We can't display this content 
</object> 
</body> 
</html> 


在 这 个 例子 里 , Rikdatala tes A Y -ARFER Wa SETA IEA EEA 
容 ， 如 果 失 败 了 ， 就 会 转 而 显示 object 元 素 中 的 内 容 。param 元 素 会 被 忽略 ， 只 剩 下 短语 和 流 内 
容 会 被 显示 出 来 ， 正 如 图 15-7 所 示 。 
E Example Vs 
€ Q | Q titan/listings/example.htm wit 











Sorry! We can't display this content 





图 15-7 ”依靠 object 元 素 里 的 备用 内 容 
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请 注意 我 在 代码 清单 里 去 掉 了 type 属 性 。 当 type 属 性 不 存在 时 ， 浏 览 器 会 尝试 从 数据 本 身 判 
断 其 内 容 类 型 。 对 于 某 些 浏 览 涡 上 的 特定 插件 而 言 ， 即 使 数据 不 存在 ,插件 也 会 被 加 载 。 这 就 意 
味 着 屏幕 上 显示 的 是 一 片 空白 区 域 ， 而 不 是 备用 内 容 。 


15.4 object 元 素 的 其 他 用 途 


虽然 object 元 素 主 要 用 于 骨 入 插件 内 容 , 但 它 最 初 是 作为 一 种 更 具 通 用 性 的 元 素来 取代 某 些 
元 素 ， 其 中 包括 img。 在 下 面 儿 节 里 ， 我 会 介绍 其 他 一 些 opject 元 素 的 使 用 方式 。 虽 然 这 些 功能 


um 在 一 段 时 间 了 ,但 不 是 所 有 浏览 咒 都 能 文 持 全 部 的 功能 。 本 书 出 于 完整 性 
的 原因 加 入 了 这 些 章节 ， 但 是 建议 你 还 是 应 该 坚持 使 用 具体 程度 更 高 的 元 素 ， 比 如 s。 















































提示 foe 性 让 object 元 素 可 以 关联 HTML 表 单 (也 就 是 第 12 章 的 主题 ), 这 是 HTML5 新 增 的 。 
当前 没有 任何 浏览 器 支持 这 个 属性 ，HTML5 规 范 对 这 一 功能 如 何 运 作 也 语 病 不 详 。 


15.4.1 ”使 用 object THRARER 


我 之 前 提 到 过 ,object 本 打算 取代 的 一 种 元 素 是 img, 因此 可 以 用 object 元 素 在 HTML 文 档 里 
芷 入 图 像 。 代 码 清单 15-9 提 供 了 一 个 演示 。 


代码 清单 15-9 ”用 object 元 素 舱 入 一 张 图 像 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«object data-"triathlon.png" type-"image/png"» 
</object> 
</body> 
</html> 


在 这 个 例子 里 , 我 让 data 属 性 引用 了 本 章 之 前 所 使 用 的 那 张 图 像 ,浏览 器 媒人 入 和 显示 了 图 像 ， 
就 跟 使 用 img 元 素 一 样 ， 如 图 15-8 所 示 。 
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图 15-8 ”用 object 元 素 符 入 一 张 图 像 






































15.4.2 ”使 用 object 元 素 创建 分 区 响应 图 


同样 可 以 用 object 元 素来 创建 客户 端 分 区 响应 图 。usemap 属 性 可 以 用 于 关联 map 元 素 和 object 
元 素 ， 如 代码 清单 15-10 所 示 。 我 使 用 的 map 和 area 元 素 跟 之 前 在 img 上 所 用 到 的 一 样 。 


代码 清单 15-10 ”用 object 元 素 创 建 一 张 客户 端 分 区 响应 图 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«map name="mymap"> 
«area href-"swimpage.html" shape-"rect" coords-"3,5,68,62" alt-"Swimming"/» 
«area href-"cyclepage.html" shape-"rect" coords-"70,5,130,62" alt-"Running"/» 
«area href-"otherpage.html" shape-"default" alt-"default"/» 
</map> 
«object data-"triathlon.png" type="image/png" usemap="#mymap"> 
</object> 
</body> 
</html> 
警告 不 是 所 有 的 浏览 器 都 支持 用 object 元 素 创建 客户 端 分 区 响应 图 。 在 本 书 撰写 过 程 中 ， 谷 


歌 的 Chrome 和 苹果 的 Safari 浏 览 器 都 不 支持 这 一 功能 。 


15.4.8 将 object 元 素 作为 浏览 上 下 文 环 境 


可 以 用 object 元 素来 将 一 张 HTML 文档 峙 入 到 另 一 张 文 档 之 中 ， 就 像 用 iframe 元 素 一 样 。 如 
果 应 用 name 属 性 ,就 会 创建 一 个 浏览 上 下 文 ， 可 以 结合 一 些 元 素 C 比如 a 和 form ) 的 target 属 性 使 
用 。 代 码 清 单 15-11 展 示 了 具体 做 法 。 


代码 清单 15-11 用 object 元 素 创 建 浏览 上 下 文 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
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«body» 
«header» 
«hi»Things I like</h1> 
«nav» 
«ul» 
<li> 
<a href="fruits.html" target="frame">Fruits I Like</a> 
</li> 
<li> 
<a href="activities.html" target="frame">Activities I Like</a> 
</li> 
</ul> 
</nav> 
</header> 


<object type-"text/html" name-"frame" width-"300" height="100"> 
</object> 
</body> 
</html> 


这 个 功能 仅仅 在 你 把 type 属 性 设置 为 text/html 时 可 用 ,但 即便 如 此 ， 浏 览 器 也 不 是 普遍 都 
支持 。 谷 歌 的 Chrome 和 苹果 的 Safari 是 支持 这 一 功能 的 主流 浏览 器 。 


15.5 AMER 
HTMLS 有 两 个 新 元 素 允 许 我 们 在 文档 中 能 入 数值 的 表现 形式 。 


15.51 显示 进度 


progress 元 素 可 以 用 来 表现 某 项 任务 逐渐 完成 的 过 程 。 表 15-12 概 述 了 progress 元 素 。 
#215-12 progress 元 素 










































































元 素 progress 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 
局 部 属性 value, max, form 

NAE 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 无 








value 属 性 定义 了 当前 的 进度 ， 它 位 于 0 和 max 属 性 的 值 所 构成 的 范围 之 间 。 当 max 属 性 被 省 略 
时 ， 范 围 是 0 至 1。 用 浮 点 数 来 表示 进度 ， 比 如 0.3 代 表 30%。 
代码 清单 15-12 展 示 了 progress 元 素 和 一 些 按钮 。 按 下 某 个 按钮 会 更 新 progress 元 素 所 显 
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示 的 值 。 我 用 一 些 简单 的 JavaScript 关 联 了 按钮 和 progress 元 素 。 本 书 会 在 第 四 部 分 介绍 这 些 
技巧 。 


代码 清单 15-12 ”使 用 progress 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 


«progress id-"myprogress" value-"10" max="100"></progress> 
«p» 

«button type-"button" value="30">30%</button> 

«button type-"button" value="60">60%</button> 

«button type-"button" value="90">90%</button> 
</p> 


<script> 
var buttons = document.getElementsByTagName('BUTTON') ; 
var progress = document.getElementById('myprogress'); 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
progress.value = e.target.value; 


} 


</script> 
</body> 
</html> 


从 图 15-9 可 以 看 到 如 何 让 progress 元 素 显 示 不 同 的 值 。 
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图 15-9 使 用 progress 元 素 





155.2 ”显示 范围 里 的 值 
meter 元 素 显 示 了 某 个 范围 内 所 有 可 能 值 中 的 一 个 。 表 15-13 概 述 了 这 个 元 素 。 
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表 15-13 ”meter 元 素 


























元 素 meter 

元 素 类 型 短语 

允许 具有 的 父 元 素 任何 可 以 包含 短语 内 容 的 元 素 

局 部 属性 value, min, max, low, high, optimum, form 
内 容 短语 内 容 

标签 用 法 开始 标签 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 无 











min 和 max 属 性 设 定 了 可 能 值 所 处 范围 的 边界 , 它们 可 以 用 浮 点 数 来 表示 。meter 元 素 的 显示 可 
以 分 为 三 个 部 分 : 过 低 、 过 高 和 最 佳 。low 属 性 设置 了 一 个 值 ， 在 它 之 下 的 所 有 值 都 被 认为 是 过 
低 ; high 属 性 设置 了 一 个 值 ， 在 它 之 上 的 所 有 值 都 被 认为 是 过 高 ; optimum 属 性 则 指定 了 “最 佳 ” 
的 值 。 代 码 清单 15-13 展 示 了 将 这 些 属 性 应 用 到 meter 元 素 。 


代码 清单 15-13 ”使 用 meter 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /» 
«/head» 
«body» 
«meter id-"mymeter" value-"90" 
min-"10" max-"100" low="40" high-"80" optimum="60"></meter> 












































«p» 
«button type-"button" value="30">30</button> 
«button type-"button" value="60">60</button> 
«button type="button" value="90">90</button> 

</p> 





<script> 
var buttons = document.getElementsByTagName( ' BUTTON') ; 
var meter = document.gettlementById('mymeter'); 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
meter.value = e.target.value; 
}; 
} 
</script> 
</body> 
</html> 
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在 这 个 例子 里 ， 几 个 button 元 素 将 meter 元 素 的 value 属 性 设置 成 过 低 和 过 高 范围 内 的 值 ， 以 
及 最 佳 值 。 图 15-10 显 示 了 浏览 器 如 何 呈 现 它们 。 
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图 15-10 ”使 用 meter 元 素 


在 当前 实现 下 , optimum 属 性 不 会 对 meter 元 素 的 外 观 产生 任何 可 视 效 果 。 支持 meter 元 素 的 浏 
览 器 仅 在 低 于 low 值 和 高 于 high 值 (如 上 图 所 示 ) 的 值 方面 有 区 别 。 


15.6 HERATA 


还 有 一 些 元 素 可 以 用 来 在 HTML 文 档 里 内 入 内 容 。 之 后 儿童 会 对 它们 进行 深入 讨论 , 但 是 出 
于 完整 性 考虑 ， 这 里 也 会 稍微 提 及 。 














15.6.1 RAIMA 


HTML5 定 义 了 一 些 新 元 素 ， 它 们 支持 在 不 借助 插件 的 情况 下 给 HTML 文档 能 和 人 音频 和 视频 。 
这 些 元 素 (audio, video, sourcefiltrack ) 会 在 第 34 章 深入 讨论 。 


15.6.2 RAAK 


canvas 元 素 是 HTML5 引 入 的 另 一 大 功能 领域 ， 我 们 可 以 用 它 来 给 HTML 文档 添加 动态 图 形 。 
canvas 元 素 在 第 35 章 和 第 36 章 都 有 涉及 。 





15.7 小结 








本 章 介 绍 了 一 些 元 素 ， 它们 允许 你 通过 树 入 内 容 丰 富 自己 的 HTML 文 档 。 这 些 元 素 从 简单 的 
添加 物 开始 ( 比如 图 像 )， 直 至 那些 通过 插件 实现 的 丰富 且 可 扩展 的 技术 。 
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这 一 部 分 我 会 向 读者 展示 如 何 使 用 CSS 控制 网 页 内 容 在 用 户 浏 览 器 中 的 呈现 方式 。CSS 极 
精巧 且 富 有 表达 力 ， 开 发 者 可 以 用 最 为 高 效 的 方式 高 度 掌 控 网 页 内 容 的 表示 。 





理解 CSS 











接 下 来 的 几 章 我 们 来 看 看 CSS (Cascading Style Sheet, HÆRRA ) 定义 的 属性 。 第 4 章 简 
单 回顾 了 CSS 的 基础 知识 ， 在 深入 研究 细节 之 前 ， 我 们 先 通过 本 章 来 了 解 一 些 其 他 的 背景 知识 。 











16.1 CSS 标准 化 


CSS 有 一 段 不 堪 回 首 的 历史 。 那 时 候 浏 览 吉 被 看 做 划分 市 场 的 工具 ， 浏 览 器 厂商 将 CSS 作 为 
创建 自己 软件 特有 功能 的 利器 。 当 时 的 情况 可 谓 一 团 糟 : 具有 相同 名 称 的 属性 采用 不 同 的 方式 处 
理 ， 只 能 用 浏览 器 特定 的 属性 访问 浏览 器 特定 的 功能 。 结果 是 Web 开 发 人 员 不 得 不 创建 只 在 一 种 
浏览 器 上 运行 的 站 点 或 应 用 程序 。 

好 的 一 面 是 ， 不同 浏览 器 通常 会 因 速度 、 易 用 性 以 及 与 CSS 等 标准 的 兼容 性 而 呈现 差别 (最 
后 一 点 发 挥 的 作用 正 越 来 越 大 ); 不 好 的 一 面 是 CSS 标 准 化 过 程 并 不 理想 。 

在 接 下 来 的 几 章 你 会 看 到 ，CSS 包 含 大 量 功能 。W3C (CSS 和 HTML 的 标准 组 织 ) 并 不 想 创 
建 一 个 单一 标准 ， 而 是 将 CSS3 分 割 为 多 个 模块 (module )， 并 允许 每 个 模块 根据 自身 需要 进行 更 
新 。 这 个 想法 非常 了 不 起 ， 它 明显 优 于 单一 方法 一 一 当然 ， 这 也 代表 不 存在 CSS3 兼 容 性 的 整体 
标准 了 ， 开 发 人 员 需 要 仔细 考量 每 一 个 模块 ， 并 判断 是 否 已 获得 足够 广泛 的 支持 来 使 用 该 模块 。 

还 有 一 个 比较 琼 手 的 问题 : 目前 还 没有 CSS3 模 块 达到 标准 化 过 程 的 最 后 阶段 ( 成 为 W3C 推 
荐 标准 )。 有 些 模 块 ， 特 别 是 那些 引入 CSS 新 功能 的 模块 ， 还 只 处 于 标准 化 过 程 的 早期 阶段 〈 工 
作 草 案 )， 随 时 都 有 可 能 变化 。 可 能 添加 、 修 改 或 删除 属性 ; 可 能 出 现 新 模块 ， 也 可 能 毙 掉 旧 模 
块 ; 不 同 模块 之 间 的 关系 可 能 发 生变 化 〈 某 些 模 块 往往 依赖 于 其 他 模块 中 定义 的 属性 或 单位 )。 
因此 ， 当 你 阅读 本 书 时 ， 某 些 比 较 新 的 属性 可 能 已 经 跟 我 撰写 本 书 时 有 所 不 同 了 。 

接 下 来 的 几 童 我 会 介绍 一 些 比较 稳定 的 模块 的 属性 , 没什么 特殊 情况 的 话 , 主流 浏览 器 很 快 
就 会 实现 这 些 属性 。 这 些 特 性 基本 已 经 稳定 了 , 新 版 本 的 浏览 器 都 会 支持 。 有 了 时候 开发 人 员 并 不 
确定 某 个 属性 是 否 适 合 自己 的 项 目 , 为 了 帮助 你 更 好 地 判断 , 本 章 后 面 的 16.4 节 “属性 简明 参考 ” 
中 给 出 了 增加 这 些 新 属性 的 CSS 版 本 号 。 

在 模块 定义 还 不 太 稳 定 的 阶段 ， 浏 览 咒 会 采用 厂商 前 级 实现 某 个 特性 。 这 种 做 法 不 同 以 往 ， 
它 允 许 早 期 采纳 者 试用 浏览 器 实现 的 这 些 新 属性 。 本 书 尽 量 避 开 这 些 试验 性 属性 ， 但 如 果 某 些 
CSS3 特 性 实在 非常 重要 ， 我 会 在 示例 中 加 上 厂商 前 级 。 无 论 如 何 ， 带 厂商 前 级 的 实现 都 非常 接 
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WIE. ADVE ASE TAN TA, FE 16-15 HY SOLS LS) ATR e 
表 16-1 浏览 器 特定 厂商 前 组 





m) 览 器 厂商 前 组 
Chrome, Safari -webkit- 
Opera -o- 
Firefox -moz- 


Internet Explorer 


16.2 Bez! 


CSS 中 的 一 个 基本 概念 是 盒 模型 (box model )。 可 见 元 素 会 在 页 面 中 占据 一 个 矩形 区 域 ， 
区 域 就 是 元 素 的 盒子 (box )， 由 四 部 分 组 成 ， 如 图 16-1 所 示 。 


MC bien 
所 一 一 边框 边界 
内 边 距 边界 
内 容 边界 


























图 16-1 CSS 盒 模型 








元 素 盒 子 有 两 个 部 分 是 可 见 的 : 内 容 和 边框 。 内 边 距 是 内 容 和 边框 之 间 的 空间 ,外 边 距 是 边 
框 和 页 面 上 其 他 元 素 之 间 的 空间 。 理 解 这 四 部 分 之 间 的 相互 关系 对 于 高 效 利用 CSS 至 关 重 要 。 在 
接 下 来 的 章节 中 , 我 们 会 学 习 控 制 外 边 距 、 内 边 距 、 边框 的 属性 , 以 及 控制 内 容 整 体外 观 的 属性 。 

元 素 还 可 以 包含 其 他 元 素 。 这 种 情况 下 ， 父 元 素 的 内 容 盒子 称 为 子 元 素 的 块 容器 (container 
block )， 通 常 称 为 容器 。 这 种 关系 如 图 16-2 所 示 。 
































图 16-2” 父 元 素 和 子 元 素 盒 模型 的 关系 
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可 以 使 用 包含 块 的 特征 限定 元 素 的 外 观 。 这 不 光 适 用 于 层 县 属性 和 继承 属性 , 还 适用 于 显 式 
定义 的 属性 ， 我 们 在 第 21 章 学 习 元 素 的 布局 时 会 看 到 这 一 点 。 


16.3 ”选择 器 简明 参考 


第 17 章 和 第 18 章 会 详细 讲解 CSS 选 择 器 ， 不 过 ， 为 方便 你 快速 查询 ， 我 们 将 选择 器 及 添加 它 
们 的 CSS 版 本 总 结 在 表 16-2 中 。 











表 16-2 CSS 选择 器 










































































































































































选 择 器 说 Bj CSS 版 本 
i 选取 所 有 元 素 2 
<type> 选取 指定 类 型 的 元 素 1 
-<class> 选取 指定 类 的 元 素 1 
#<id> 选取 id 属性 为 指定 值 的 元 素 1 
attr] 选取 定义 了 attr 属 性 ， 且 属性 值 任意 的 元 素 2 
attr="val"] 选取 定义 了 atti 属 性 ， 且 属性 值 为 val 的 元 素 2 
attr^-"val"] 选取 定义 了 attr 属 性 ， 且 属性 值 以 val 字 符 串 打头 的 元 素 3 
attr$-"val"] 选取 定义 了 attr 属 性 ， 且 属性 值 以 val 字 符 串 结尾 的 元 素 3 
attr*-"val"] 选取 定义 了 attr 属 性 ， 且 属性 值 包含 val 字 符 串 的 元 素 3 
attr~="val"] 选取 定义 了 attr 属 性 ， 且 属性 值 包含 多 个 值 ， 而 其 中 一 个 为 val 的 元 素 2 
attr|="val"] 选取 定义 了 attr 属 性 ,， 且 属性 值 是 以 连 字 符 分 割 的 一 串 值 ， 而 第 一 个 为 val 2 
的 元 素 
< 选择 器 >，< 选 择 器 > 选取 同时 匹配 所 有 选择 器 的 元 素 1 
“选择 器 > 《选择 器 > 目标 元 素 为 匹配 第 一 个 选择 器 的 元 素 的 后 代 ， 且 匹配 第 二 个 选择 器 1 
< 选择 器 、、 < 选择 器 > 目标 元 素 为 匹配 第 一 个 选择 器 的 元 素 的 直接 后 代 ， 且 匹配 第 二 个 选择 器 2 
< 选择 器 、+ < 选择 器 > 目标 元 素 紧 跟 在 匹配 第 一 个 选择 器 的 元 素 之 后 ， 且 匹配 第 二 个 选择 器 2 
< 选择 器 、~ < 选择 器 > 目标 元 素 跟 在 匹配 第 一 个 选择 器 的 元 素 之 后 ， 且 匹配 第 二 个 选择 需 3 
: first-line 选取 块 级 元 素 文本 的 首 行 1 
::first-letter 选取 块 级 元 素 文本 的 首 字母 1 
pee 在 选取 元 素 之 前 或 之 后 插入 内 容 
:root 选取 文档 中 的 根 元 素 3 
:first-child 选取 元 素 的 第 一 个 子 元 素 2 
:last-child 选取 元 素 的 最 后 一 个 子 元 素 3 
:only-child 选取 元 素 的 唯一 一 个 子 元 素 3 
:only-of-type 选取 属于 父 元 素 的 特定 类 型 的 唯一 子 元 素 3 
:nth-child(n) 选取 父 元 素 的 第 n 个 子 元 素 
:nth-last-child(n) 选取 父 元 素 的 倒数 第 n 个 子 元 素 3 
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( 续 ) 
”选择 器 3 LJ. HW HW A 

:nth-of-type(n) 选取 属于 父 元 素 的 特定 类 型 的 第 "个 子 元 素 3 
:nth-last-of-type(n) 选取 属于 父 元 素 的 特定 类 型 的 倒数 第 a 个 子 元 素 3 
:enabled 选取 已 启用 的 元 素 P 
:disabled 选取 被 禁用 的 元 素 3 
:checked 选取 所 有 选中 的 复 选 框 和 单 选 按钮 3 
:default 选取 默认 元 素 
bcm 选取 基于 输入 验证 判定 的 有 效 或 者 无 效 的 input 元 素 3 
ed uM 选取 被 限定 在 指定 范围 之 内 或 者 之 外 的 input 元 素 3 
:required 根据 是 否 允 许 使 用 required 属 性 选取 input 元 素 3 
:optional 
:link 选取 未 访问 的 链接 元 素 1 
:visited 选取 用 户 已 访问 的 链接 元 素 1 
:hover 选取 鼠标 指针 悬 停 在 其 上 面 的 元 素 2 
:active 选取 当前 被 用 户 激活 的 元 素 ， 这 通常 意味 着 用 户 即将 点 击 该 元 素 2 
:focus 选取 获得 焦点 的 元 素 2 
:not(< 选 择 器 >) 否定 选择 ( 如 选取 所 有 不 匹配 < 选择 器 > 的 元 素 ) 3 
:empty 选取 不 包含 任何 子 元 素 或 文本 的 元 素 3 
:lang(< 语 言 >) 选取 lang 属 性 为 指定 值 的 元 素 2 
:target 选取 URL 片 段 标识 符 指 向 的 元 素 3 





16.4 ”属性 简明 参考 


第 19 ~ 24 章 会 讲述 CSS 属 性 ， 为 方便 查阅 ， 接 下 来 的 几 节 先 总 结 一 下 CSS 属 性 及 添加 相应 
生 的 CSS 版 本 。 
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"uni 
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16.4.1 边框 和 背景 属性 


表 16-3 总 结 了 可 能 应 用 于 元 素 的 边框 和 背景 的 属性 ， 这 些 
表 16-3 ”边框 和 背景 属性 








性 会 在 第 19 章 详细 介绍 。 C 
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属 性 说 明 CSS 版 本 
background 设置 所 有 背景 值 的 简写 属性 1 
background-attachment 设置 元 素 的 背景 附着 属性 ， 决 定 背景 图 片 是 否 随 页 面 一 起 滚动 1 
background-clip 设置 元 素 背 景 颜色 和 图 像 的 裁剪 区 域 3 
background-color 设置 背景 颜色 1 





background-image 设置 元 素 背景 图 像 
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CHE) 
属 性 说 明 CSS 版 本 

background-origin 设置 背景 图 像 绘 制 的 起 始 位 置 3 
background-position 设置 背景 图 像 在 元 素 盒 子 中 的 位 置 1 
background-repeat 设置 背景 图 像 的 重复 方式 1 
background-size 设置 背景 图 像 的 绘制 尺寸 3 
border 为 所 有 边界 设置 所 有 边框 宽度 的 简写 属性 1 
border-bottom 为 所 有 下 边框 设置 宽度 的 简写 属性 1 
border-bottom-color 为 所 有 下 边框 设置 颜色 1 
border-bottom-left-radius 将 边框 左下 角 设置 为 圆 角 3 
border-bottom-right-radius 将 边框 右 下 角 设置 为 圆 角 3 
border-bottom-style 设置 元 素 下 边框 的 样式 1 
border-bottom-width 设置 元 素 下 边框 的 宽度 1 
border-color 设置 四 条 边框 的 颜色 1 
border- image 使 用 图 像 作为 边框 的 简写 属性 3 
border-image-outset 指定 图 像 向 边框 盒 外 部 扩展 的 区 域 3 
border- image-repeat 指定 边框 图 像 的 缩放 和 重复 方式 3 
border-image-slice 指定 边框 图 像 的 切割 方式 3 
border-image-source 设置 边框 图 像 的 来 源 路 径 3 
border-image-width 设置 边框 图 像 的 宽度 3 
border-left 设置 元 素 左边 框 的 简写 属性 1 
border-left-color 设置 左边 框 的 颜色 1 
border-left-style 设置 左边 框 的 样式 1 
border-left-width 设置 左边 框 的 宽度 1 
border-radius 指定 圆 角 边框 的 简写 属性 3 
border-right 设置 元 素 右边 框 的 简写 属性 1 
border-right-color 设置 右边 框 的 颜色 1 
border-right-style 设置 右边 框 的 样式 1 
border-right-width 设置 右边 框 的 宽度 1 
border-style 设置 所 有 边框 样式 的 简写 属性 1 
border-top 设置 上 边框 的 简写 属性 1 
border-top-color 设置 上 边框 的 颜色 1 
border-top-left-radius 将 边框 左上 角 设 置 为 圆 角 3 
border-top-right-radius 将 边框 右上 角 设 置 为 圆 角 3 
border-top-style 设置 上 边框 的 样式 1 
border-top-width 设置 上 边框 的 宽度 1 
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( 续 ) 
m 性 i B CSS 版 本 
border-width 设置 四 个 边框 的 宽度 l 
box-shadow 设置 元 素 的 一 个 或 者 多 个 阴影 效果 3 
outline-color 设置 元 素 边框 外 围 轮廓 线 的 颜色 2 
outline-offset 设置 轮廓 距离 元 素 边 框 边缘 的 偏 移 量 2 
outline-style 设置 轮廓 的 样式 
outline-width 设置 轮廓 的 宽度 ? 
outline 在 一 条 声明 中 设置 轮廓 的 简写 属性 2 
16.4.2 ” 盒 模型 属性 
表 16-4 总 结 了 配置 元 素 盒子 可 能 用 到 的 属性 。 这 些 属性 会 在 第 20 章 详细 介绍 。 
表 16-4 ”基本 的 盒子 属性 
选 择 器 说 明 CSS 版 本 
box-sizing 设置 要 应 用 盒子 尺寸 相关 属性 的 元 素 i 
clear 设置 盒子 的 左边 界 、 右 边界 或 左右 两 个 边界 不 允许 出 现 浮动 元 素 1 
display 设置 元 素 盒子 的 类 型 l 
float 将 元 素 移 动 到 其 包含 块 的 左边 界 或 者 右边 界 , 或 者 另 一 个 浮动 元 素 的 边界 1 
height 设置 元 素 盒 子 的 高 度 1 
margin 设置 元 素 盒子 四 个 外 边 距 宽度 的 简写 属性 1 
margin-bottom BREF PINDER SEE ! 
margin-left 设置 盒子 左 外 边 距 的 宽度 1 
margin-right 设置 盒子 右 外 边 距 的 宽度 1 
margin-top 设置 盒子 上 外 边 距 的 宽度 1 
max-height 设置 元 素 的 最 大 高 度 
max-width 设置 元 素 的 最 大 宽度 
min-height 设置 元 素 的 最 小 高 度 : 
min-width 设置 元 素 的 最 小 宽度 
overflow 设置 内 容 横向 和 竖 向 溢出 盒子 时 处 理 方式 的 简写 属性 2 
overflow-x 设置 内 容 横 向 溢出 盒子 时 的 处 理 方 式 
overflow-y 设置 内 容 竖 向 溢出 盒子 时 的 处 理 方式 2 
padding 设置 元 素 盒 子 四 个 内 边 距 宽度 的 简写 属性 
padding-bottom 设置 盒子 下 内 边 距 的 宽度 l 
padding-left 设置 盒子 左 内 边 距 的 宽度 : 
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padding-right 设置 盒子 右 内 边 距 的 宽度 i 

padding-top 设置 盒子 上 内 边 距 的 宽度 ! 

visibility 设置 元 素 的 可 见 性 2 

width 设置 元 素 的 宽度 

16.4.3 布局 属性 
表 16-5 总 结 了 创建 元 素 布局 可 能 用 到 的 属性 ， 这 些 属性 会 在 第 21 章 详细 描述 。 
表 16-5 布局 属性 
选 择 器 说 明 CSS 版 本 

bottom 设置 元 素 下 外 边 距 边界 与 包含 块 下 边界 之 间 的 偏 移 2 
column-count 指定 多 列 布局 的 列 数 3 
column-fill 多 列 布局 中 列 与 列 之 间 的 内 容 如 何 分 布 3 
column-gap 指定 多 列 布局 中 列 与 列 之 间 的 间隔 3 
column-rule 多 列 布局 中 定义 列 与 列 之 间 的 规则 的 简写 属性 3 
column-rule-color 设置 多 列 布局 中 的 颜色 规则 3 
column-rule-style 设置 多 列 布局 中 的 样式 规则 3 
column-rule-width 设置 多 列 布局 中 的 宽度 规则 3 
columns 在 多 列 布局 中 设置 列 数 和 列 宽度 的 简写 属性 3 
column-span 指定 多 列 布局 中 元 素 能 跨 多 少 列 3 
colum-width 指定 多 列 布局 中 列 的 宽度 3 
display 指定 元 素 在 页 面 上 的 显示 方式 1 
flex-align 它们 都 是 由 弹性 盒子 布局 定义 的 ， 目 前 还 没有 实现 3 
flex-direction 
flex-order 
flex-pack 
left 设置 元 素 左 外 边 距 边界 与 包含 块 左边 界 之 间 的 偏 移 2 
position 设置 元 素 的 定位 方法 2 
right 设置 元 素 右 外 边 距 边界 与 包含 块 右 边界 之 间 的 偏 移 2 
top 设置 元 素 上 外 边 踢 边界 与 包含 块 上 边界 之 间 的 偏 移 2 
z-index BEREIK HOHE OE 2 


16.4.4 ”文本 属性 








表 16-6 总 结 了 设置 文本 样式 可 能 用 到 的 属性 。 这 些 属 性 会 在 第 22 章 详细 介绍 。 
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表 16-6 文本 属性 
属 性 说 — BB CSS 版 本 
@font-face 指定 网 页 使 用 的 字体 3 
direction 指定 文本 方向 2 
font 在 一 条 声明 中 设置 文本 字体 、 大 小 和 颜色 的 简写 属性 1 
font-family 指定 文本 所 用 的 字体 系列 ， 排 在 前 面 的 优先 使 用 1 
font-size 指定 字体 大 小 i 
font-style 指定 采用 正常 字体 、 斜 体 还 是 倾斜 字体 1 
font-variant 指定 字体 是 否 以 小 型 大 写字 母 显示 1 
font-weight 设置 文本 粗细 
etter-spacing 设置 字母 间距 1 
ine-height 设置 行 高 1 
text-align 设置 文本 对 齐 方式 : 
text-decoration 规定 添加 到 文本 的 修饰 (如 下 划 线 ) 
text-indent 规定 文本 块 中 首 行文 本 的 缩 进 1 
text-justify 设置 文本 对 齐 方 式 3 
text-shadow 指定 文本 块 的 阴影 效果 3 
text-transform 控制 文本 块 字母 大 小 写 1 
word-spacing 指定 单词 间距 1 
16.4.5 过渡、 动画 和 变换 属性 
表 16-7 总 结 素 外 观 可 能 用 到 的 一 些 属性 (通常 需要 一 段 时 间 来 展示 效果 )， 这 些 属 
性 会 在 第 23 章 详细 介 
表 16-7 ” 过渡、 动画 和 变换 属性 
属 性 说 明 CSS 版 本 

@keyframes 为 动画 指定 一 个 以 上 的 关键 帧 3 

animation 设置 动画 的 简写 属性 

animation-delay 指定 动画 开始 前 的 延迟 时 间 3 

animation-direction 指定 动画 重复 播放 时 的 播放 方向 3 

animation-duration 指定 动画 持续 时 间 3 

animation-iteration-count 指定 动画 的 循环 次 数 3 

animation-name 指定 用 于 动画 的 关键 帧 集合 的 名 称 3 

animation-play-state 指定 动画 状态 ( 播放 或 暂停 ) 3 

animation-timing-function 指定 关键 帧 之 间 计 算 属 性 值 的 函数 3 
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E 性 


说 明 





transform 
transform-origin 
transition 
transition-delay 
transition-duration 


transition-property 





transition-timing-function 


16.4.6 ”其 他 属性 


表 16-8 总 结 了 一 些 属性 ， 
会 单独 在 第 24 章 详细 介绍 


指定 应 用 于 元 素 的 变换 

指定 元 素 变换 的 起 点 

定 CSS 属 性 过 渡 效 果 的 简写 属性 
定 

定 

定 





触发 过 渡 的 延迟 时 间 
过 渡 的 持续 时 间 

带 有 过 渡 效果 的 属性 

定 过滤 期 间 计算 中 间 属性 值 的 函数 





























这 些 属性 放 到 前 面 提 到 的 专门 讲解 某 些 属性 的 章节 不 太 合 适 , 我 们 











表 16-8 其 他 属性 






























































E 性 i BB CSS 版 本 
border-collapse 指定 表格 相 邻 单元 格 的 边框 的 显示 样式 2 
border-spacing 指定 相 邻 单元 格 的 边框 的 距离 2 
caption-side 指定 表格 标题 的 位 置 : 
color 设置 元 素 的 前 景色 1 
cursor 指定 光标 的 形状 
empty-cells 指定 是 否 显示 表格 中 的 空 单元 格 2 
ist-style 设置 列表 样式 的 简写 属性 
ist-style-image 指定 列表 项 标记 使 用 的 图 像 : 
ist-style-position 指定 列表 项 标记 相对 于 列表 项 内 容 的 位 置 1 
ist-style-type 指定 列表 项 标记 的 类 型 : 
opacity 设置 元 素 的 透明 度 
table-layout 间 定 表格 单元 格 、 行 和 列 的 算法 规则 2 








16.5 小结 








ERATE 起 几 章 内 容 的 背景 知识 介绍 ， 到 时 候 我 会 详细 讲解 这 些 CSS 
了 几 个 简明 参考 ， 你 在 实际 项 目 中 用 Ficek 时 候 随时 都 可 以 从 中 找到 各 种 属性 的 用 法 。 如 果 你 
起 在 自己 的 项 目 中 使 用 CSS 特 性 ， 那么 考虑 定义 该 属性 的 CSS 规 范 的 版 本 非常 
的 开头 已 经 解释 过 了 ， 有 些 CSS3 模 块 还 不 稳定 ， 而 有 些 CSS3 模 块 的 实现 并 没有 我 们 想象 的 那么 











广泛 。 














属性 。 本 章 也 给 出 





重要 。 我 在 这 一 章 





使 用 CSS 选 择 器 (BA 部 分 ) 











第 4 章 讲 过 ，CSS 选 择 器 的 作用 是 找 出 某 类 元 素 ， 以 便 我 们 使 用 style 元 素 或 者 外 部 样式 表 对 
这 类 元 素 设 置 样式 。 

本 章 和 第 18 章 将 介绍 和 演示 核心 的 CSS3 选 择 器 。 你 会 看 到 ， 选 择 方法 非常 简单 ， 你 也 会 学 
会 如 何 根据 一 般 情 况 和 特殊 情况 调整 选择 方法 。 这 些 选择 锅 引 入 CSS 的 时 间 不 同 ,因而 适用 的 CSS 
版 本 也 不 同 。 本 书 介绍 的 所 有 选择 器 都 可 以 得 到 主流 浏览 器 的 良好 支持 , 但 跟 某 些小 众 浏览 器 的 
兼容 性 可 能 稍 差 。 为 了 给 你 提供 靠 谱 的 参考 , 前 一 章 已 经 将 所 有 选择 器 引入 的 CSS 版 本 标清 楚 了 。 
表 17-1 是 本 章 内 容 的 一 个 简单 总 结 。 
























































表 17-1 本章 内 容 概要 

































































































































































i — 8 解决 方案 代码 清单 
选择 所 有 元 素 使 用 通用 选择 器 17-1 
根据 类 型 选择 元 素 使 用 类 型 选择 器 17-2 
根据 全 局 属性 class 的 值 选择 元 素 使 用 类 选择 器 17-3 、17-4 
根据 全 局 属性 id 的 值 选择 元 素 使 用 id 选 择 器 17-5 
基于 属性 选择 元 素 使 用 属性 选择 器 17-6 ~ 17-8 
同时 匹配 多 个 选择 器 选择 器 之 间 用 逗号 隔 开 17-9 
选择 元 素 的 后 代 元 素 选择 器 之 间 用 空格 隔 开 17-10、17-11 
选择 元 素 的 子 元 素 使 用 > 选择 器 17-12 
选择 兄弟 元 素 使 用 + 或 ~ 选择 器 17-13、17-14 
选择 文本 块 的 首 行文 本 使 用 : :first-line 选 择 器 17-15 
选择 文本 块 的 首 字母 使 用 : :first-letter 选 择 器 17-16 
在 元 素 之 前 或 之 后 插入 内 容 使 用 :before 和 :after 选 择 器 17-17 
向 元 素 插入 数值 内 容 fili FA counter pk Be 17-18 














17.4 使 用 CSS 基本 选择 器 


有 些 选择 器 使 用 起 来 非常 简单 ， 我 们 把 这 部 分 选择 器 称 为 基本 选择 器 (basic selector )。 开 发 
人 员 可 使 用 这 类 选择 器 在 文档 中 进行 比较 宽泛 的 选择 , 也 可 以 将 其 看 做 结合 多 种 选择 器 进行 特殊 





Aza 分 ) 
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选择 的 基础 《本 章 后 面 会 介绍 复合 选择 器 )。 接 下 来 每 节 介 绍 一 种 基本 选择 器 的 用 法 。 





17.1.1 选择 所 有 元 素 
通用 选择 器 匹配 文档 中 的 所 有 元 素 。 它 是 最 基本 的 选择 器 ,不 过 使 用 很 少 ， 因 为 匹配 过 于 广 
泛 。 表 17-2 是 通用 选择 器 的 一 个 简单 概括 。 
表 17-2 ”通用 选择 器 















































* 


选择 器 
匹配 所 有 元 素 
最 低 支 持 CSS 版 本 2 














代码 清单 17-1 是 一 个 使 用 通用 选择 器 的 样式 示例 。 
代码 清单 17-1 使 用 通用 选择 器 


<!DOCTYPE HTML» 
«html» 

«head» 
<title>Example</title> 
<style type="text/css"> 

* 
{ 








border: thin black solid; 
padding: 4px; 


</style> 
</head> 


<body> 
<a href="http://apress.com">Visit the Apress website</a> 


<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 


</body> 
</html> 


代码 清单 17-1 定 义 的 样式 将 选中 的 元 素 以 细 黑 框 包 起 ， 这 是 本 章 展 示 匹 配 选 择 器 的 一 种 样 
式 。 该 选择 右 的 显示 效果 如 图 17-1 所 示 。 
f RT v1 3 o |) | 
© Example CES kaa. 


| € > C |Ọ titan/listings/example.htm wef 





























Visit the Apress website 


























图 17-1 使 用 通用 CSS 选 择 器 
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图 17-1 看 起 来 有 点 奇怪 ， 因 为 通用 选择 器 会 匹配 文档 中 的 所 有 元 素 ， 包 括 html 和 body 元 素 。 
通用 选择 器 非常 给 力 ， 但 很 容易 用 过 头 儿 ， 因 此 使 用 之 前 请 三 思 。 
17.1.2 ”根据 类 型 选择 元 素 


指定 元 素 类 型 为 选择 器 可 以 选取 一 个 文档 中 该 元 素 的 所 有 实例 ( 例如 ,如 果 你 想 选 中 所 有 的 
a 元 素 就 可 以 使 用 a 作 为 选择 器 )。 表 17-3 是 元 素 类 型 选择 器 的 一 个 简单 总 结 。 
表 17-3 元素 类 型 选择 器 








选择 央 < 元 素 类 型 > 
匹配 所 有 指定 类 型 的 元 素 
开始 支持 的 CSS 版 本 1 


代码 清单 17-2 是 个 例子 。 
代码 清单 17-2 ”使 用 元 素 类 型 选择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
at 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


17-2 是 使 用 该 选择 器 的 效果 。 
j © Example G 
€ > Œ Q titan/listings/example.htm AAE S 


Visit the Apress website | 
| 


I like apples and oranges. 
Visit the W3C website 


图 17-2 ”根据 类 型 选择 元 素 
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提示 “只 需 将 元 素 类 型 用 过 号 分 开 即 可 将 某 个 样式 应 用 到 多 个 元 素 类 


17.1.3 ”根据 类 选择 元 素 


类 选择 器 采用 全 局 属性 class 匹 配 指 定 类 的 元 素 。 表 17-4 描 述 了 类 选择 器 。 要 回顾 class ,请 
查阅 第 3 章 。 











表 17-4 ”元 素 类 选择 器 


























选择 器 < 类 名 > (或 *.< 类 名 > ) 

《元素 类 型 >.< 类 名 > 
匹配 属于 指定 类 的 元 素 ; 当 跟 元 素 类 型 一 起 使 用 时 ， 匹 配属 于 指定 类 的 特定 类 型 的 元 素 
最 低 支持 CSS 版 本 1 


代码 清单 17-3 演 示 了 一 个 类 选择 器 。 


代码 清单 17-3 ”根据 类 选择 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
.class2 { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 
«a class-"classi class2" href-"http://apress.com"»Visit the Apress website</a> 
<p>I like «span class="class2">apples</span> and oranges.</p> 
«a href="http://w3c.org">Visit the W3C website</a> 














«/body» 
«/html» í 
在 代码 清单 17-3 中 , 我 使 用 了 选择 器 .class2。 使 用 该 选择 器 的 效果 是 选中 指定 class2 的 所 有 
类 型 的 元 素 。 























这 个 选择 器 有 两 种 表示 形式 : 一 种 是 使 用 通用 选择 器 , 男 一 种 是 不 使 用 。*.class2 和 .class2 
是 等 价 的 。 第 一 种 形式 看 起 来 更 容易 理解 ， 但 实际 使 用 中 第 二 种 更 常见 。 这 种 模式 在 CSS 选 择 右 
中 很 常见 。 如 果 你 逐个 添加 合适 的 选择 器 ， 你 会 发 现 所 有 选择 器 无 非 都 是 有 效 的 过 滤器 : 缩小 前 
面 选择 器 的 范围 ， 匹 配 更 少 元 素 。 这 些 选 择 器 相互 组 合 能 够 产生 具体 程度 更 高 的 匹配 。17.2 节 会 
告诉 你 组 合 使 用 各 种 选择 器 的 技巧 。 

代码 清单 17-3 中 指定 class2 的 元 素 有 两 个 : a 元 素 和 span 元 素 。 图 17-3 是 应 用 这 个 样式 的 
效果 。 

































































17. 使 用 CSS 基本 选择 器 339 


[ea mrm) 
J © Example x Var i 
€ > Œ |Q titan/listings/example.htm! wat 


Visit the Apress website 


I like apples| and oranges. 


Visit the W3C website 












































图 17-3 WEHR 
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此 处 类 选择 器 的 具体 程度 还 可 以 更 高 , 将 与 指定 类 匹配 的 元 素 限 定 为 一 种 类 型 。 要 3 
效果 ， 将 通用 选择 器 替换 为 元 素 类 型 就 可 以 了 ， 如 代码 清单 17-4 所 示 。 


代码 清单 17-4 ”使 用 类 选择 器 匹配 单一 元 素 类 型 


<!DOCTYPE HTML> 
«html» 
«head» 
«title»Example«/title» 
«style type-"text/css"» 
span.class2 { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 


<body> 
<a class-"classi class2" href-"http://apress.com"»Visit the Apress website</a> 


<p>I like <span class="class2">apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


我 们 在 这 个 例子 中 进一步 缩小 了 选择 器 的 范 和 
围 之 后 的 效果 如 图 17-4 所 示 。 
f i. [59 | 
J © Example x Vas 
€ > Q Otitan/listings/example.htm! wit 





， 使 它 只 匹配 指定 class2 的 span 元 素 。 缩 小 范 


aT 

















Visit the ess website 


I like  apples| and oranges. 


Visit the W3C website 




















图 17-4 ”缩小 类 选择 器 的 范围 
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提示 “如 果 你 想 选择 属于 多 个 类 的 元 素 ， 可 指定 类 名 (不 同类 名 之 间 用 句点 隔 开 )。 例 如 ，span. 
class1.C1ass2 会 选择 同时 指定 class1 和 cl1ass2 的 元 素 。 


17.1.4 根据 ID 选择 元 素 


使 用 ID 选择 器 可 根据 全 局 属性 id 的 值 选择 元 素 ( 回顾 id， 请 查看 第 3 章 )。 表 17-5 简 单 总 结 了 
id 选择 加。 














表 17-5 ”元素 id 选择 器 























选择 髓 #<id 值 > 

《元素 类 型 >.#<id 值 > 
匹配 具有 指定 全 局 属性 id 值 的 元 素 
最 低 支 持 CSS 版 本 1 





第 3 章 解释 过 ，HTMIL 文 档 中 元 素 id 属 性 的 值 必须 唯一 。 这 意味 着 只 要 使 用 ID 选择 器 ， 查 找 
的 必定 是 单个 元 素 。 代 码 清 单 17-5 展 示 了 一 个 id 选择 器 的 示例 。 


代码 清单 17-5 ”使 用 id 选 择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
#w3canchor { 
border: thin black solid; 
padding: 4px; 


























</style> 
</head> 
<body> 
<a id="apressanchor" class="class1 class2" href="http://apress.com"> 
Visit the Apress website 
</a> 
<p>I like <span class="class2">apples</span> and oranges.</p> 
«a id-"w3canchor" href-"http://w3c.org"»Visit the W3C website</a> 
«/body» 
</html> 


这 个 例子 选中 了 id 为 wacanchor 的 元 素 ， 最 终 效 果 如 图 17-5 所 示 。 

从 这 个 示例 看 来 ， 如 果 你 想 为 单个 元 素 应 用 样式 ， 使 用 元 素 的 style 属 性 可 以 达到 同样 的 效 
果 。 确 实 , 不 过 只 有 跟 其 他 选择 器 组 合 使 用 ， 后 一 个 选择 器 才能 真正 排 上 用 场 , 本 章 后 面 会 详细 
介绍 这 种 方法 。 
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图 17-5 ”根据 ID 选择 元 素 

















17.1.5 ”根据 属性 选择 元 素 
使 用 属性 选择 器 能 基于 属性 的 不 同方 面 匹配 属性 ， 具 体 信 息 如 表 17-6 所 示 。 
表 17-6 元 素 属性 选择 器 
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选择 器 [< 条 件 >] 或 < 元 素 类 型 >[< 条 件 >] 
匹配 具有 匹配 指定 条 件 的 属性 的 元 素 ( 此 处 支持 的 条 件 类 型 请 见 表 17-7 ) 
最 低 支 持 CSS 版 本 视 条 件 而 异 











此 处 使 用 通用 选择 器 可 以 匹配 具有 符合 指定 条 件 属 性 的 所 有 元 素 ( 或 指定 类 型 的 所 有 元 素 ), 
过 ， 更 常见 的 用 法 是 不 用 通用 选择 器 ， 而 将 选择 条 件 放 到 [和 ] 字 符 之 间 。 代 码 清单 17-6 展 示 了 
一 个 常用 的 属性 选择 器 。 
代码 清单 17-6 ”使 用 元 素 属 性 选择 右 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
[href] { 
border: thin black solid; 
padding: 4px; 











</style> 
</head> 
<body> 
«a id-"apressanchor" class="class1 class2" href="http://apress.com"> 


Visit the Apress website 





</a> 
<p>I like <span class="class2">apples</span> and oranges.</p> 
«a id-"w3canchor" href-"http://w3c.org"»Visit the W3C website</a> 
</body> 
</html> 
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上 述 代 码 使 用 了 最 简单 的 属性 选择 器 ， 它 匹配 的 是 所 有 具有 href 属 性 的 元 素 ， 而 不 管 属 性 的 
具体 值 是 什么 。 在 示例 HTML 文 档 中 ， 该 选择 器 的 效果 是 选中 两 个 a 元 素 ， 如 图 17-6 所 示 。 
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图 17-6 “基于 属性 是 否 存在 选择 元 素 ( 忽略 属性 值 ) 














可 以 为 待 匹 配 的 属性 限定 更 多 复杂 的 条 件 ， 表 17-7 列 出 了 属 | 


























隆 选择 器 支持 的 条 件 。 这 些 条 件 





















































































































































是 分 两 批 添加 到 CSS 中 的 ， 因 此 表 中 同时 给 出 了 相应 的 CSS 版 本 。 
表 17-7 元 素 属性 选择 器 的 条 件 
条 # Wi — BB CSS 版 本 
attr] 选择 定义 attr 属 性 的 元 素 ， 忽 略 属性 值 (代码 清单 17-6 就 是 这 种 情况 ) 2 
attr="val"] 选择 定义 attr 属 性 ， 且 属性 值 为 val 的 元 素 2 
Bre Ya 选择 定义 attr 属 性 ， 且 属性 值 以 字符 串 val 打 头 的 元 素 3 
attr$-"va 选择 定义 attr 属 性 ， 且 属性 值 以 字符 串 val 结 尾 的 元 素 3 
attr*-"va 选择 定义 attz 属 性 ， 且 属性 值 包含 字符 串 val 的 元 素 3 
attr~="val" 选择 定义 attr 属 性 ， 且 属性 值 具 有 多 个 值 ， 其 中 一 个 为 字符 串 val 的 元 素 。 代 2 
码 清单 17-7 是 使 用 该 选择 器 的 一 个 示例 
attr|="val" 选择 定义 attr 属 性 ， 且 属性 值 为 连 字符 分 割 的 多 个 值 ， 其 中 第 一 个 为 字符 串 2 
val 的 元 素 。 代 码 清 单 17-8 是 使 用 该 选择 器 的 一 个 示例 

















这 里 补充 说 明 一 下 最 后 两 个 条 件 。 处 理 支 持 多 个 值 
条 件 ， 如 全 局 属性 class。 代 码 清 单 17-7 是 个 例子 。 


代码 清单 17-7 基于 多 个 属性 值 中 的 一 个 选择 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
[class~="class2"] { 
border: thin black solid; 
padding: 4px; 











且 不 同 的 值 用 空格 分 割 的 属性 会 用 到 ~= 
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} 
</style> 
</head> 
<body> 


<a id="apressanchor" class="class1 class2" href="http://apress.com"> 


Visit the Apress website 
</a> 


<p>I like «span class="class2">apples</span> and oranges.</p> 
«a id-"w3canchor" href="http://w3c.org">Visit the W3C website</a> 


</body> 
</html> 


代码 清单 17-7 中 使 用 了 class 全 局 属性 ， 








个 值 的 属性 。 不 过 ， 要 匹配 class 值 无 需 使 用 
上 面 这 个 选择 器 使 用 的 条 件 是 : 匹配 定义 class 























因为 这 是 目前 为 止 我 们 介绍 的 唯一 一 个 可 以 接受 多 
属性 选择 器 ， 类 选择 需 会 自动 处 理 多 个 类 成 员 。 
属性 ， 且 class 的 值 包括 class2 的 元 素 。 我 对 


符合 条 件 的 内 容 元 素 的 类 属性 进行 了 加 粗 显 示 ， 这 个 选择 器 的 效果 如 图 17-7 所 示 。 
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图 17-7 基于 多 个 属性 值 选 择 元 素 


若是 一 个 属性 值 中 包括 多 条 用 连 字 符 分 割 的 信息 ,这 时 就 要 用 到 |= 条 件 ，lang 全 局 属性 就 是 

















一 个 很 好 的 例子 。lang 属 性 可 以 跟 包 括 区 域 子 标记 的 语言 说 明 符 一 起 使 用 ， 例 如，en-us 代 表 美 














国 英 语 , en-gb 代 表 英 国 英 语 。 代码 清单 17-8 展 示 了 如 何 选中 所 有 标记 为 en 的 元 素 ， 而 无 需 枚 举 不 


同 的 区 域 (实际 上 还 挺 多 )。 
代码 清单 17-8 使 用 |= 属 性 条 件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
[Jang|="en"] { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 
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<a lang="en-us" id="apressanchor" class="class1 class2" href="http://apress.com"> 
Visit the Apress website 
</a> 
<p>I like <span lang="en-gb" class="class2">apples</span> and oranges.</p> 
«a lang="en" id-"w3canchor" href-"http://w3c.org"»Visit the W3C website</a> 
«/body» 
«/html» 


该 选择 器 的 效果 如 图 17-8 所 示 。 注 意 选择 器 除了 匹配 带 有 子 标记 的 元 素 ， 也 匹配 了 第 二 个 a 
元 素 ， 这 个 a 元 素 并 没有 区 域 子 标记 ( 也 就 是 lang 元 素 的 值 是 en， 而 不 是 en-us 或 en-gb )。 
= R ENT 
f © Example NE 
le > C QO titan/listings/example.htm wit 
I like apples| and oranges. 


17-8 ”基于 lang 属 性 选择 元 素 



























































17.2 ”复合 选择 器 


组 合 使 用 不 同 的 选择 器 可 以 匹配 更 特定 的 元 素 。 有 的 复合 选择 器 能 将 目标 样式 应 用 到 更 多 元 
素 ， 有 的 复合 选择 器 则 会 锁定 更 少 元 素 ， 总 之 会 让 你 的 选择 非常 具体 。 在 接 下 来 的 几 节 中 , 我 会 
为 你 展示 组 合 使 用 选择 屁 的 各 种 方法 。 


17.2.1 并 集 选 择 器 


创建 由 逗号 分 隔 的 多 个 选择 器 可 以 将 样式 应 用 到 单个 选择 器 匹配 的 所 有 元 素 。 表 17-8 是 并 集 
选择 器 的 简单 概述 。 









































表 17-8 并 集 选 择 器 


选择 需 < 选择 器 >, < 选择 器 >, < 选择 器 > 
匹配 单个 选择 器 匹配 的 所 有 元 素 的 并 集 
最 低 支持 CSS 版 本 1 




















代码 清单 17-9 是 一 个 包含 并 集 选 择 器 的 例子 。 
代码 清单 17-9 创建 并 集 选择 需 


<!DOCTYPE HTML> 








«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
a, [lang|-"en"] { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 

«a id-"apressanchor" class="class1 class2" href="http://apress.com"> 

Visit the Apress website 

</a> 

<p>I like <span lang-"en-uk" class="class2">apples</span> and oranges.«/p» 

«a id-"w3canchor" href-"http://w3c.org"»Visit the W3C website</a> 
</body> 

</html> 


在 代码 清单 17-9 中 ， 我 指定 了 一 个 类 型 选择 器 (a) 和 一 个 属性 选择 器 ( [lang|="en"] )， 两 
者 之 间 用 逗号 隔 开 (a，[lang|="en"] )。 浏 览 器 会 依次 求 每 个 选择 器 的 值 ， 然 后 将 样式 应 用 到 匹 
配 元 素 。 你 可 以 任意 混搭 不 同类 型 的 选择 右 ， 不 要 求 它 们 匹配 的 元 素 有 什么 共性 。 从 图 17-9 可 以 
看 到 代码 清单 17-9 中 的 选择 器 的 效果 。 
f [.—.| x) 
Q Example v 
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图 17-9 创建 并 集 选 择 髓 
可 以 根据 自己 的 需要 组 合 任意 多 个 选择 器 ， 只 需 将 不 同 的 选择 器 之 间 用 逗号 隔 开 即 可 。 
17.2.2 后 代 选 择 器 


后 代 选 择 器 用 于 选择 包含 在 其 他 元 素 中 的 元 素 。 表 17-9 是 关于 后 代 选 择 器 的 简单 概述 。 
表 17-9 后代 选择 器 



































选择 器 < 第 一 个 选择 器 > 《第 二 个 选择 器 > 
匹配 标 元 素 为 匹配 第 一 个 选择 器 的 元 素 的 后 代 ， 且 匹配 第 二 个 选择 器 

















最 低 支持 CSS 版 本 1 
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先 应 用 第 一 个 选择 咒 , 再 从 匹配 元 素 的 后 代 中 找 出 匹配 第 二 个 选择 需 的 元 素 。 后 代 选 择 需 会 
匹配 任意 包含 在 匹配 第 一 个 选择 器 的 元 素 中 的 元 素 ， 而 不 仅 是 直接 子 元 素 。 代 码 清单 17-10 展 示 
了 一 个 例子 。 


代码 清单 17-10 ”选择 后 代 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
p span { 
border: thin black solid; 
padding: 4px; 



































} 
</style> 
</head> 
<body> 
«a id-"apressanchor" class="class1 class2" href="http://apress.com"> 
Visit the Apress website 
</a> 
<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p> 
«a id-"w3canchor" href-"http://w3c.org"»Visit the W3C website</a> 
«/body» 
«/html» 


代码 清单 17-10 中 的 选择 器 匹配 p 元 素 的 后 代 span 元 素 。 对 于 这 个 示例 中 的 HTML 文 档 ， 直 
接 用 span 元 素 选择 器 能 得 到 同样 的 结果 , 不 过 这 里 的 方法 更 灵活 , 看 一 下 代码 清单 17-11 你 就 会 
明白 。 


代码 清单 17-11 更 复杂 的 后 代 选 择 需 示例 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
#mytable td { 
border: thin black solid; 
padding: 4px; 








} 
</style> 
</head> 
<body> 
<table id="mytable"> 
«tr»«th»Name«/th»«th»City«/th»«/tr» 
«tr»«td»Adam Freeman«/td»«td»London«/td»«/tr» 
«tr»«td»Joe Smith«/td»«td»New York«/td»«/tr» 
«tr»«td»Anne Jones«/td»«td»Paris«/td»«/tr» 
«/table» 





<p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p> 


<table id="othertable"> 
<tr><th>Name</th><th>City</th></tr> 
<tr><td>Peter Pererson«/td»«td»Boston«/td»«/tr» 
<tr><td>Chuck Fellows</td><td>Paris</td></tr> 
«tr»«td»Jane Firth</td><td>Paris</td></tr> 
</table> 

</body> 

</html> 


在 代码 清单 17-11 中 ， 我 定义 了 两 个 简单 的 表格 ， 每 个 表格 定义 一 个 id 属 性 。 使 用 ID 选 择 器 
选中 id 值 为 nytable 的 表格 ,然后 选中 表格 包含 的 td 元 素 。 这 个 选择 器 的 效果 如 图 17-10 所 示 。 
f Eca) 
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I like apples and oranges. 


| Name City 

| Peter Pererson Boston 
Chuck Fellows Paris 

Jane Firth Paris 




















117-10 ”选择 后 代 元 素 
注意 ， 这 个 例子 中 选择 的 不 是 直接 后 代 ， 我 跳 过 了 tr 元 素 ， 直 接 匹 配 td 元 素 。 














17.2.3 ”选择 子 元 素 
子 代 选 择 器 跟 后 代 选 择 器 很 像 ， 不 过 只 选择 匹配 元 素 中 的 直接 后 代 。 表 17-10 是 子 代 选择 器 























的 一 个 简单 概述 。 
表 17-10” 子 代 选 择 器 
OMERERE < 第 -个 选择 器 ，》< 第 二 个 选择 器 
匹配 目标 元 素 为 匹配 第 一 个 选择 右 的 元 素 的 直接 后 代 ， 且 匹配 第 二 个 选择 恬 
最 低 支 持 CSS 版 本 2 





代码 清单 17-12 演 示 了 如 何 选 择 子 元 素 。 


348 第 17 章 使 用 CSS 选择 器 (第 工 部 分 ) 





代码 清单 17-12 ”选择 子 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
body > * > span, tr > th { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 

<table id="mytable"> 
<tr><th>Name</th><th>City</th></tr> 
<tr><td>Adam Freeman</td><td>London</td></tr> 
<tr><td>Joe Smith«/td»«td»New York«/td»«/tr» 
«tr»«td»Anne Jones«/td»«td»Paris«/td»«/tr» 
«/table» 


<p>I like «span lang="en-uk" class-"class2"»apples«/span» and oranges.«/p» 


«table id="othertable"> 
«tr»«th»Name«/th»«th»City«/th»«/tr» 
«tr»«td»Peter Pererson«/td»«td»Boston«/td»«/tr» 
<tr><td>Chuck Fellows</td><td>Paris</td></tr> 
<tr><td>Jane Firth</td><td>Paris</td></tr> 
</table> 

</body> 

</html> 











在 这 个 选择 器 中 , RAE TATER REE AREE T body UAR FEXET OUR 
的 子 元 素 的 span， 然 后 找到 tr 元 素 的 子 元 素 th， 从 图 17-11 可 以 看 到 有 哪些 元 素 匹 配 这 个 选择 器 。 
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图 17-11 选择 子 元 素 








17.24 选择 兄弟 元 素 


使 用 相 邻 兄弟 选择 器 可 以 选择 紧 跟 在 某 元 素 之 后 的 元 素 。 表 17-11 是 这 种 选择 器 的 一 个 简单 
概述 。 








表 17-11 相 邻 兄弟 选择 器 











Le Peat < 第 一 个 选择 器 》+ < 第 二 个 选择 器 > 
匹配 目标 元 素 紧 跟 匹 配 第 一 个 选择 器 的 元 素 ， 且 匹配 第 二 个 选择 器 
最 低 支持 CSS 版 本 2 


代码 清单 17-13 展 示 了 如 何 选择 相 邻 兄弟 元 素 。 
代码 清单 17-13 ”使 用 相 邻 兄弟 选择 带 


<!DOCTYPE HTML> 





«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
p*aít 
border: thin black solid; 
padding: 4px; 
«/style» 
«/head» 
«body» 
«a href-"http://apress.com"»Visit the Apress website«/a» 
<p>I like «span lang-"en-uk" class-"class2"»apples«/span» and oranges.«/p» 
«a href-"http://w3c.org"»Visit the W3C website«/a» 
«a href-"http://google.com"»Visit Google«/a» 
</body> 
</html> 





代码 清单 17-13 中 的 选择 器 会 匹配 紧 跟 在 p 元 素 之 后 的 a 元 素 。 从 图 17-12 中 可 以 看 到 ， 文 档 中 
只 有 一 个 a 元 素 符合 要 求 ， 即 指向 W3C 网 站 的 超 链 接 。 
te T= agam) 
j © Example E 
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图 17-12 ”选择 相 邻 兄弟 元 素 























第 17 章 使 用 CSS 选择 器 (第 工 部 分 ) 
使 用 普通 兄弟 选择 器 选择 范围 会 稍微 宽松 一 些 , 它 匹配 的 元 素 在 指定 元 素 之 后 , 但 不 一 定 相 
邻 。 表 17-12 是 这 种 选择 需 的 一 个 简单 概述 

表 17-12 ”普通 兄弟 选择 器 


< 第 一 个 选择 器 、~ < 第 二 个 选择 器 > 
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efe 
匹配 目标 元 素 位 于 匹配 第 一 个 选择 器 的 元 素 之 后 ， 且 匹配 第 二 个 选择 器 
最 低 支 持 CSS 版 本 3 


AS 


代码 清单 17-14 展 示 了 如 何 使 用 普通 兄弟 选择 器 。 
代码 清单 17-14 ”使 用 普通 兄弟 选择 器 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 


<style type="text/css"> 

p^aít 
border: thin black solid; 
padding: 4px; 























«/style» 
«/head» 


«body» 
«a href-"http://apress.com"»Visit the Apress website«/a» 
class-"class2"»apples«/span» and oranges.«/p» 


<p>I like «span lang-"en-uk" 
«a href="http://w3c.org">Visit the W3C website</a> 


«a href-"http://google.com"»Visit Google«/a» 


«/body» 
ian : 
这 个 选择 器 匹配 的 元 素 不 仅 限于 匹配 第 一 个 选择 器 的 元 素 的 相 邻 兄弟 元 素 , 那么 示例 中 就 有 
两 个 a 符合 条 件 。 还 有 一 个 a 元 素 ( 链接 到 http://apress.com ) 没 被 选中 ， 因 为 它 在 p 元 素 前 面 ， 我 


们 只 能 选择 p 元 素 之 后 的 元 素 。 该 选择 器 的 效果 如 图 17-13 所 示 。 
Lee 
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Visit the Apress website 


I like apples and oranges. 
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图 17-13 ”使 用 普通 兄弟 选择 器 
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17.3 ”使 用 伪 元 素 选择 器 


目前 为 止 ， 我 们 已 经 学 习 了 如 何 使 用 HTML 文档 中 定义 的 元 素 选 择 文档 内 容 。CSS 中 还 定义 
了 伪 选 择 器 (pseudo-selector )， 它 们 提供 了 更 复杂 的 功能 ， 但 并 非 直接 对 应 HTML 文 档 定义 的 元 
素 。 伪 选择 器 分 两 种 : 伪 元 素 和 伪 类 。 本 节 将 介绍 和 演示 伪 元 素 选择 器 。 顾 名 思 义 ， 伪 元 素 实际 
上 并 不 存在 ， 它 们 是 CSS 提 供 的 额外 “福利 ”， 为 了 方便 你 选中 文档 内 容 。 











17.3.1 使 用 ::first-line 选择 器 
: :first-line 选 择 器 匹配 文本 块 的 首 行 。 表 17-13 是 ::first-line 选 择 器 的 一 个 简单 概述 。 


表 17-13” ::first-line 伪 元 素 选择 器 




















选择 器 ::first-line 
匹配 文本 内 容 的 首 行 
最 低 支 持 CSS 版 本 1 





代码 清单 17-15 展 示 了 一 个 使 用 : :first-line 选 择 器 的 例子 。 
代码 清单 17-15 “使 用 : :first-1line 伪 元 素 选择 器 


<!DOCTYPE HTML> 





«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
:: first-line { 
background-color:grey; 
color:white; 
} 
</style> 
</head> 
<body> 
<p>Fourscore and seven years ago our fathers brought forth 
on this continent a new nation, conceived in liberty, and 
dedicated to the proposition that all men are created equal.</p> 
<p>I like <span lang-"en-uk" class="class2">apples</span> and oranges.«/p» 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 








这 个 示例 中 只 使 用 了 这 一 个 选择 器 , 不 过 伪 元 素 选择 顺 也 可 以 作为 修饰 符 跟 其 他 选择 器 一 块 
儿 使 用 。 例 如 ， 假 设 我 想 选中 p 元 素 的 首 行 ， 就 可 以 指定 p: :first-1ine 作 为 选择 需 。 
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提示 伪 元 素 选 择 器 的 前 级 是 两 个 冒号 字符 ( :: )， 但 浏览 器 认为 选择 器 只 有 一 个 冒号 (也 就 说 
将 ::first-line 看 做 :first-line ), 这 样 它 的 格式 就 跟 伪 类 选择 Oe KY, 本章 前 


面 讲 过 ， 这 是 为 了 向 后 兼容 。 
如 果 浏 览 器 窗口 调整 大 小 , 浏览 器 会 重新 评估 哪些 内 容 属 于 文档 的 首 行 。 这 就 意味 着 首 行 样 
人 
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lFourscore and seven years ago our fathers brought forth on this continent a new nation. 


conceived in liberty, and dedicated to the proposition that all men are created equal. 
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| ourscore and seven years ago our fathers brought forth on this 


continent a new nation, conceived in liberty, and dedicated to the 
proposition that all men are created equal. 


I like apples and oranges | 
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如 何 调整 ， 浏 览 器 都 会 确保 样式 成 功 应 用 到 首 行 





图 17-14 ”不论 窗口 


17.3.2 ”使 用 ::first-letter 选择 器 























大 家 一 眼 就 能 猜 到 : :first-letter 选 择 器 的 作用 : 选择 文本 块 的 首 字母 。 表 17-14 是 这 个 伪 元 
素 选 择 器 的 简单 概述 
表 17-14 ::first-letter 伪 元 素 选 择 器 
选择 器 ::first-letter 
匹配 文本 内 容 的 首 字母 
最 低 支持 CSS 版 本 1 


代码 清单 17-16 展 示 了 这 个 选择 器 的 一 个 例子 。 
代码 清单 17-16 使 用 : :first-letter 擅 元 素 选 择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
::first-letter { 
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background-color :grey; 
color:white; 

border: thin black solid; 
padding: 4px; 


} 
</style> 
</head> 
<body> 
<p>Fourscore and seven years ago our fathers brought forth 
on this continent a new nation, conceived in liberty, and 
dedicated to the proposition that all men are created equal.</p> 


<p>I like <span lang-"en-uk" class="class2">apples</span> and oranges.«/p» 
«a href="http://w3c.org">Visit the W3C website</a> 
«/body» 
«/html» 


这 个 选择 器 的 效果 如 图 17-15 所 示 。 

f cama 
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BH and seven years ago our fathers brought 
orth on this continent a new nation, conceived in 
liberty, and dedicated to the proposition that all men are 
created equal. 


[] like apples and oranges. 


Visit the W3C website 























图 17-15 使用: :first-letter 选 择 器 














17.3.3 ”使 用 :before Al: after 选择 器 


这 两 个 选择 器 跟 之 前 的 选择 器 都 不 太一 样 ， 因 为 它们 会 生成 内 容 ， 并 将 其 插入 文档 。 第 9 章 
介绍 过 :before 选 择 器 ， 当 时 我 们 学 习 了 如 何 使 用 它 来 创建 自 定义 列表 。:after 选 择 器 跟 :before 
类 似 ， 只 不 过 是 将 内 容 添加 到 元 素 后 面 ， 而 不 是 前 面 。 表 17-15 是 这 两 个 选择 器 的 简单 概述 。 


表 17-15 “ :before 和 :after 选 择 器 









































选 择 器 说 明 CSS 版 本 
:before 在 选中 元 素 的 内 容 之 前 插入 内 容 2 





:after 在 选中 元 素 的 内 容 之 后 插入 内 容 2 
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代码 清单 17-17 是 使 用 这 两 个 选择 器 的 实例 。 
代码 清单 17-17 “使 用 :before 和 ;after 选择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
a:before { 
content: "Click here to " 


a:after { 
content: "I" 
) 
«/style» 
«/head» 
«body» 
«a href-"http://apress.com"»Visit the Apress website«/a» 
<p>I like <span>apples</span> and oranges.«/p» 
«a href-"http://w3c.org"»Visit the W3C website</a> 
</body> 
</html> 


在 代码 清单 17-17 中 , 我 选中 了 a 元 素 , 对 它 使 用 :before 和 :after 伪 选择 器 。 使 用 这 类 选择 器 
的 时 候 ， 通 过 设置 content 属 性 的 值 可 以 指定 要 搬入 的 内 容 。 这 个 属性 比较 特别 ， 只 能 跟 伪 选择 
器 一 起 使 用 。 在 上 述 代码 清单 中 ，Click here to 会 插入 a 元 素 的 内 容 之 前 ， 感 叹 号 会 插入 a 元 素 的 
内 容 之 后 。 添 加 样式 后 的 效果 如 图 17-16 所 示 。 
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Click here to Visit the Apress website! 


| I like apples and oranges. 


Click here to Visit the W3C website! 

















图 17-16 使 用 :before 和 :after 选 择 器 














17.3.4 使 用 CSS 计数 器 


:before 和 :after 选 择 器 经 常 跟 CSS 计 数 器 特性 一 起 使 用 ， 结 合 两 者 可 生成 数值 内 容 。 在 第 9 
章 我 们 列举 过 一 个 使 用 计数 器 创建 自 定义 列表 的 例子 。 代 码 清单 17-18 演 示 了 一 遍 。 
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代码 清单 17-18 ”使 用 CSS 计 数 器 特性 


<!DOCTYPE HTML» 


«html» 
«head» 
«title»Example«/title» 
«style type-"text/css"» 
body ( 
counter-reset: paracount; 
) 
p:before { 
content: counter(paracount) ". "; 
counter-increment: paracount; 
} 
</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<p>I also like <span>mangos</span> and cherries.</p> 
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 











要 创建 计数 器 ， 需 要 使 用 专门 的 counter-reset 属 性 为 计数 器 设置 名 称 ， 如 下 所 示 : 

counter-reset: paracount; 
这 一 行 代码 会 初始 化 名 为 paracount 的 计数 器 ,将 它 的 值 设置 为 1。 你 也 可 以 指定 其 他 初始 值 ， 只 
需要 在 计数 器 名 称 后 面 添加 一 个 数字 即 可 ， 像 这 样 : 

counter-reset: paracount 10; 

如 果 你 想 多 定义 几 个 计数 器 ， 只 需 在 同一 条 counter-reset 声 明 中 添加 计数 器 名 称 就 可 以 了 
(也 可 以 带 上 初始 值 )， 像 这 样 : 

counter-reset: paracount 10 othercounter; 
这 条 声明 创建 了 两 个 计数 器 : 一 个 名 为 paracount， 初始 值 为 10; 男 一 个 名 为 othercounter, 初始 
值 为 1。 计数 器 初始 化 后 就 能 够 作为 content 属 性 的 值 , 跟 :before 和 ;after 选择 器 一 起 使 用 来 指定 
样式 了 ， 像 这 样 : 


content: counter(paracount) " 





这 条 声明 用 在 包括 : before) xk ess D, Hos E ed om TEPORE UTE P Pd VU OBS r3 76 
素 之 前 , 此 处 , ETE AA AY [EUG A AS TP REL Rs PE TE EB, 
2、3 等 )， 不 过 ， 也 可 以 指定 其 他 数值 格式 ， 像 这 样 ， 


content: counter(paracount, lower-alpha) " 


























处 对 计数 器 添加 了 参数 1ower-alpha, 其 功能 是 指定 数值 样式 。 这 个 参数 可 以 是 list-style-type 
导 性 支持 的 任意 值 ， 我 会 在 第 24 章 详细 介绍 。 
counter-increment 属 性 专门 用 来 设置 计数 需 增 量 ， 该 属性 的 值 是 要 增加 计数 的 计数 器 的 名 
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称 ， 像 这 样 : 


counter-increment: paracount; 


计数 器 默认 增 量 为 1 ， 当 然 也 可 以 自行 指定 其 他 增 量 ， 像 这 样 : 


counter-increment: paracount 2; 


在 代码 清单 17-18 中 设 定 计数 器 之 后 的 效果 如 图 17-17 所 示 。 








Visit the Apress website 
| 1. I like apples and oranges. 
2. I also like mangos and cherries. 


Visit the W3C website 
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图 17-17 对 指定 内 容 使 用 计数 器 


17.4 ”小 结 


本 章 描 述 了 CSS 选 择 需 和 伪 元 素 ， 通 过 两 者 可 以 





指定 应 用 样式 的 目标 元 素 。 使 用 选择 器 可 以 





匹配 大 量 元 素 , 组 合 多 种 选择 器 也 能 将 目标 元 素 锁定 为 HTML 文 档 的 特定 部 分 。 对 于 匹配 文档 中 
实际 不 存在 的 内 容 ， 伪 元 素 相 当 实 用 。 下 一 章 讲 的 伪 类 跟 伪 元 素 的 工作 原理 相同 。 





学 好 选择 器 是 高 效 使 用 CSS 的 关键 。 下 一 章 我 们 
会 好 好 练 练 手 ， 自 己 熟 悉 这 些 选 择 骨 才 是 王道 。 


会 介 


绍 大 量 选 择 器 实例 ,我 建议 你 借 这 个 机 


使 用 CSS 选 择 论 CSE IL BBS) 








本 章 我 们 继续 学 习 CSS 选 择 器 ,来 看 一 下 伪 类 。 伪 类 跟 伪 元 素 一 样 ， 并 不 是 直接 针对 文档 元 
素 的 ， 而 是 为 你 基于 某 些 共同 特征 选择 元 素 提供 方便 。 表 18-1 是 本 章 内 容 的 概述 。 
#18-1 ”本章 内 容 概要 























































































































































































































j| 题 解决 方案 代码 清单 
选择 文档 中 的 根 元 素 使 用 :root 选 择 器 18-1 
选择 子 元素 使 用 :first-child、:1last-child、:only-child 或 :only-of-type 选 择 器 18-2 ~ 18-6 
选择 指定 索引 处 的 子 元 素 使 用 :nth-child、:nth-last-child、:nth-of-type 或 :nth-last-of-type 18-7 

选择 器 

选择 启用 或 禁用 的 元 素 使 用 :enabled 或 者 :disabled 选 择 器 18-8 
选择 被 匀 选 的 单 选 按钮 或 复 选 ” 使 用 :checked 选 择 器 18-9 
框 元 素 
选择 默认 元 素 使 用 :default 选 择 器 18-10 
根据 输入 验证 选择 元 素 使 用 :valid 或 :invalid 选 择 需 18-11 
选择 指定 范围 的 输入 元 素 使 用 :in-range 或 :out-of-range 选 择 器 18-12 
根据 是 否 人 允许 使 用 必需 属性 选 ” 使 用 :required 或 :optional 选 择 器 18-13 
择 输入 元 素 
选择 超级 链接 使 用 :linked 或 :visited 选 择 器 18-14 
选择 鼠标 当前 悬 停 在 其 上 的 元 素 ”使 用 :hover 选 择 器 18-15 
选择 当前 被 用 户 激活 的 元 素 使 用 :active 选 择 器 18-16 
选择 获得 焦点 的 元 素 使 用 :focus 选 择 器 18-17 
选择 不 匹配 某 个 选择 器 的 元 素 使 用 否定 选择 右 18-18 
选择 内 容 为 空 的 元 素 使 用 :empty 选 择 器 -= 
根据 语言 选择 元 素 使 用 :lang 选 择 器 18-19 
选择 URL 片 段 指 向 的 元 素 Jti JH target Peg 18-20 





18.1 ”使 用 结构 性 伪 类 选择 器 


使 用 结构 性 伪 类 选择 器 能 够 根据 元 素 在 文档 中 的 位 置 选择 元 素 。 这 类 选择 器 都 有 一 个 冒号 字 
符 前 级 ( : )， 例 如 :empty。 它 们 可 以 单独 使 用 ， 也 可 以 跟 其 他 选择 器 组 合 使 用 ， 如 p:empty。 

















TF 
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18.1.1 使 用 根 元 素 选 择 器 
:root 选 择 屁 匹配 文档 中 的 根 元 素 。 它 可 能 是 用 得 最 





























人 少 的 一 个 伪 类 选择 右 , 因为 总 是 返回 html 
元 素 。 表 18-2 简 单 总 结 了 :root 选 择 髓 。 
表 18-2 :root 选 择 器 
选择 器 :root 
匹配 选择 文档 中 的 根 元 素 ， 总 是 返回 html 
最 低 支 持 CSS 版 本 


3 
代码 清单 18-1 演 示 了 一 个 :root 选 择 器 用 例 。 
代码 清单 18-1 使 用 :root 选 择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
:root { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 


<a href="http://apress.com">Visit the Apress website</a> 
<p>I like «span lang="en-uk" class-"class2"»apples«/span» and oranges.«/p» 


«a href="http://w3c.org">Visit the W3C website</a> 
</body> 


</html> 
该 选择 器 的 效果 如 图 18-1 所 示 ， 看 起 来 有 点 不 好 分 辨 , 边框 包 着 整个 儿 文 档 。 
f = cj 
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Visit the Apress website 


I like apples and oranges. 


Visit the W3C website 



































图 18-1 使 用 :root 选 择 器 
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18.1.2 ”使 用 子 元 素 选择 器 
使 用 子 元 素 选择 器 匹配 直接 包含 在 其 他 元 素 中 的 单个 元 素 。 表 18-3 简 单 总 结 了 这 类 选择 器 。 
表 18-3 于 元 素 选择 器 











选 择 器 OBB CSS 版 本 
:first-child 选择 元 素 的 第 一 个 子 元 素 2 
:last-child 选择 元 素 的 最 后 一 个 子 元 素 : 
:only-child 选择 元 素 的 唯一 子 元 素 3 
:only-of-type 选择 元 素 指定 类 型 的 唯一 子 元 素 3 








1. 使 用 :first-child 选 择 器 
:first_child 选 择 器 匹配 由 包含 它们 的 元 素 ( 即 父 元 素 ) 定义 的 第 一 个 子 元 素 。 代 码 清单 18-2 
演示 了 :first-child 选 择 器 选择 器 的 用 法 。 


代码 清单 18-2 ”使 用 :first-child 选 择 需 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
:first-child { 
border: thin black solid; 
padding: 4px; 











</style> 

</head> 

<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and <span>oranges</span>.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 

</body> 

</html> 


在 代码 清单 18-2 中 ,我 只 使 用 了 :first-child 选 择 器 ， 这 意味 着 它 会 匹配 任意 元 素 的 第 
子 元 素 。 从 图 18-2 可 以 看 到 哪些 元 素 被 选中 了 。 
将 :first-child 选 择 器 用 做 修饰 符 ， 或 者 跟 其 他 选择 器 组 合 使 用 可 以 缩小 选中 元 素 的 范围 。 


代码 清单 18- 3 演示 了 怎 么 做 。 c 
代码 清单 18-3 ”组 合 使 用 :first-child 选 择 器 和 其 他 选择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
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<style type="text/css"> 
p > span:first-child { 
border: thin black solid; 
padding: 4px; 


</style> 

</head> 

<body> 
<a href-"http://apress.com"»Visit the Apress website</a> 
<p>I like <span>apples</span> and <span>oranges</span>.</p> 
<a href-"http://w3c.org"»Visit the W3C website</a> 

</body> 

</html> 





[ Sa} 


J © Example x Vee 
€ > C OQOtitan/listings/example.htn vg | X | 


Visit the Apress website 
I like and oranges. 


Visit the W3C website 
































18-2 ”使 用 :first-child 选 择 器 


这 个 选择 器 会 匹配 作为 p 元 素 第 一 个 子 元 素 的 任意 span 元 素 ， 本 例 的 HTML 文档 中 只 有 一 个 
这 样 的 元 素 。 这 个 选择 器 的 匹配 结果 如 图 18-3 所 示 。 


[ lo) a 


y © Example xe 
|e > ÇC Frae eae ee" A | 


Visit the Apress website 


I like and oranges. 


Visit the W3C website 


























M J 


图 18-3 ”组 合 使 用 :人 irst-child 选 择 器 和 另 一 个 选择 器 











2. 使 用 :1ast-child 选 择 器 
:last-child 选 择 器 匹配 由 包含 它们 的 元 素 定 义 的 最 后 一 个 元 素 。 代 码 清 单 18-4 演 示 
了 :1last-child 选 择 的 用 法 。 
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代码 清单 18-4 ”使 用 :1ast-child 选 择 器 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
:last-child { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 


<body> 
<a href="http://apress.com">Visit the Apress website</a> 


<p>I like <span>apples</span> and <span>oranges</span>.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


该 选择 器 匹配 的 元 素 如 图 18-4 所 示 。 注 意 ， jM ru ELE 原因 是 body 元 素 是 
html 的 最 后 一 个 子 元 素 ，body 中 的 内 容 会 匹配 这 个 选择 器 。 
f arm) 
J Q Example x Y dE 
| € > Œ |Q titan/listings/example.htn yy | | 


^ 

















Visit the Apress website 


m 


I like apples and oranges |. 


Visit the W3C website 


























图 18-4 ”使 用 :1ast-child 选 择 器 








3. 使 用 :only-child 选 择 器 
:only-child 选 择 器 匹配 父 元 素 包 含 的 唯一 子 元 素 。 代 码 清单 18-5 展 示 了 这 个 选择 器 的 用 法 。 


代码 清单 18-5 (EH :only-childYefégs 


«IDOCTYPE HTML» 


«html» 


<title>Example</title> 
<style type="text/css"> 
:only-child { 
border: thin black solid; 
padding: 4px; 
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</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 


<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 


</body> 
</html> 


只 有 一 个 子 元 素 的 元 素 就 p 元 素 一 个 ， 它 的 唯一 子 元 素 是 span 元 素 ， 图 18-5 可 以 看 到 这 个 选 
择 器 匹配 的 元 素 。 
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Visit the Apress website 


Ilike and oranges. 


Visit the W3C website 


























图 18-5 ”使 用 :only-child 选 择 器 


4. 使 用 :only-of-type 选 择 器 
:only-of-type 选 择 器 匹配 父 元 素 定 义 类 型 的 唯一 子 元 素 。 代 码 清单 18-6 展 示 了 一 个 例子 。 








代码 清单 18-6 ”使 用 :only-of-type 选 择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
:only-of-type { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


该 选择 器 匹配 的 元 素 如 图 18-6 所 示 。 看 来 这 个 选择 器 单独 使 用 匹配 范围 比较 广 。 通 常 ， 任 意 
文档 都 存在 不 少 父 元 素 定义 类 型 的 唯一 子 元 素 。 当 然 , 将 这 个 选择 器 跟 其 他 选择 器 组 合 使 用 可 以 
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缩小 匹配 范围 。 





人 = ca D x" | 


/ © Example Nas 
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€ -3 Œ |QOtitan/listings/example.htr I | 








Visit the Apress website 


Visit the W3C website Em 





























图 18-6 ”使 用 :only-of-type 选 择 器 


18.1.3 ”使 用 :nth-child 选择 器 


:nth-child 选 择 器 跟 上 一 节 讲 的 子 元 素 选 择 嚣 类似， 但 使 用 这 类 选择 器 可 以 指定 一 个 索引 以 
匹配 特定 位 置 的 元 素 。 表 18-4 简 单 总 结 了 :nth-child 选 择 器 。 


4218-4 ” :nth-child 选 择 器 














选 择 器 说 明 CSS 版 本 
:nth-child(n) 选择 父 元 素 的 第 z 个 子 元 素 3 
:nth-last-child(n) 选择 父 元 素 的 倒数 第 "个 子 元 素 3 
:nth-of-type(n) 选择 父 元 素 定义 类 型 的 第 个 子 元 素 3 
:nth-last-of-type(n) 选择 父 元 素 定义 类 型 的 倒数 第 个子 元 素 3 




















这 类 选择 器 都 带 有 一 个 参数 ， 是 你 感 兴趣 的 元 素 的 索引 ， 索 引 从 1 开始 。 代 码 清单 18-7 展 示 
了 :nth-child 选 择 器 的 用 法 。 


代码 清单 18-7 使 用 :nth-child 选 择 器 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
body > :nth-child(2) { 
border: thin black solid; 
padding: 4px; 


i 








«/style» 
«/head» 
«body» 
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</html> 


<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 

<a href="http://w3c.org">Visit the W3C website</a> 
</body> 





在 代码 清单 18-7 中 ， 我 选择 了 body 元 素 的 第 二 个 子 元 素 ， 本 例 中 只 有 一 个 ， 如 图 18-7 所 示 。 





r 


/® Example 








Sa) 
€ 3 QC © titan/list T pm Á "X 
I like apples and oranges. | 


| Visit the Apress website | 
| 
Visit the W3C website 





| 
J 














图 18-7 使 用 :nth-child 选 择 器 


这 里 我 不 打算 再 演示 其 他 :nth-child 选 择 器 了 ， 因 为 它们 跟 相 应 的 常规 子 选择 器 的 作用 一 

















样 ， 只 是 加 了 个 索引 值 。 


18.2 ”使 用 UI 伪 类 选择 器 















































使 用 UI 伪 类 选择 器 可 以 根据 元 素 的 状态 匹配 元 素 。 表 18-5 概 括 了 UI 选择 器 。 
表 18-5 ”UI 选择 器 
a ES 说 明 CSS 版 本 
:enabled 选择 启用 状态 的 元 素 
:disabled 选择 禁用 状态 的 元 素 3 
:Checked 选择 被 选中 的 input 元 素 〈 只 用 于 单 选 按钮 和 复 选 框 ) 3 
:default 选择 默认 元 素 3 
:valid 根据 输入 验证 选择 有 效 或 者 无 效 的 input 元 素 3 
:invalid 
: in-range 选择 在 指定 范围 之 内 或 者 之 外 受 限 的 input 元 素 3 
:out-of-range 
:required 根据 是 否 人 允许:required 属 性 选择 input 元 素 3 
:optional 
18.2.1 选择 启用 或 禁用 元 素 
有 些 元 素 有 启用 或 者 禁用 状态 , 这 些 元 素 一 般 是 用 来 收集 用 户 输入 的 。:enabled 和 :disabled 
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选择 器 不 会 匹配 没有 禁用 状态 的 元 素 。 代 码 清单 18-8 给 出 了 一 个 使 用 :enabled 选 择 器 的 例子 。 
代码 清单 18-8 ”使 用 :enabled 选 择 唤 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
:enabled { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 
<textarea> This is an enabled textarea</textarea> 
<textarea disabled> This is a disabled textarea</textarea> 
</body> 
</html> 


代码 清单 18-8 中 的 HTML 包 含 两 个 textarea 元 素 ， 一 个 定义 了 enabled 属 性 ， 一 个 定义 了 
disabled 属 性 。:enabled 选 择 器 会 匹配 第 一 个 textarea 元 素 ， 如 图 18-8 所 示 。 


J © Example x Ve S i 
€ > CQ |Q titan/listings/example.htr vy | N | 




















This is an enabled 
textarea 


This is a disabled 
textarea P. 























图 18-8 ”使 用 :enabled 选 择 器 





18.2.2 ”选择 已 匀 选 的 元 素 

使 用 :checked 选 择 器 可 以 选中 由 checked 属 性 或 者 用 户 勾 选 的 单 选 按钮 或 者 复 选 框 ,演示 这 个 
选择 需 的 问题 是 应 用 到 单 选 按钮 和 复 选 框 的 样式 不 多 。 代 码 清单 18-9 展 示 了 :checked 选 择 器 的 一 
个 用 例 。 

代码 清单 18-9 ”使 用 :checked 选 择 器 


<!DOCTYPE HTML> 
<html> 
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<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
:checked 4 span ( 

background-color: red; 

color: white; 

padding: 5px; 

border: medium solid black; 


} 
</style> 
</head> 
<body> 
<form method="post" action-"http://titan:8080/form"» 
<p> 
«label for="apples">Do you like apples:</label> 
<input type="checkbox" id="apples" name="apples"/> 
<span>This will go red when checked</span> 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


为 解决 样式 限制 问题 , 我 使 用 了 兄弟 选择 (第 17 章 介绍 过 ) 来 改变 复 选 框 旁 边 的 span 元 素 
的 外 观 ， 复 选 框 未 勾 选 和 色 选 之 后 的 效果 如 图 18-9 所 示 。 


r 










Example = Vite 


€ - C |QOtitan/listings/example.htm 


Do you like apples: © This will go red when checked 


Submit 








Example 


€ 3 C |Q titan/listings/example.htm 家 | 入 





Do you like apples: ^ EES Reese EU | 


Submit 











图 18-9 ”选择 已 勾 选 的 元 素 


没有 专门 用 来 匹配 未 勾 选 元 素 的 选择 涡 ， 但 我 们 可 以 组 合 使 用 :checked 选 择 器 和 否定 选择 
器 ， 我 会 在 18.4.1 节 介绍 


18.2.3 ”选择 默认 元 素 
:default 选 择 咒 从 一 组 类 似 的 元 素 中 选择 默认 元 素 。 例 如 ， 提 交 按 钮 总 是 表单 的 默认 按钮 。 





Tr 
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代码 清单 18-10 展 示 了 :default 选 择 器 的 用 法 。 
代码 清单 18-10 ”使 用 :default 元 素 选择 器 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
:default ( 
outline: medium solid red; 
) 
«/style» 
«/head» 
«body» 
«form method-"post" action-"http://titan:8080/form"» 
«p» 
«label for-"name"»Name: «input id-"name" name-"name"/»«/label» 
</p> 
<button type="submit">Submit Vote</button> 
«button type="reset">Reset</button> 
</form> 
</body> 
</html> 














这 个 选择 器 通常 跟 outline 属 性 一 块 使 用 ， 第 19 章 会 讲述 outline 属 性 。 这 个 选择 器 的 效果 如 
图 18-10 所 示 。 











o |e 
A| Example 
€ ə C Q titan/listings/ex: yy | A 
Name: 
M A 




















图 18-10 ”使 用 :default 选 择 器 











18.2.4 选择 有 效 和 无 效 的 input TH 


:valid 和 :invalid 选 择 器 分 别 匹配 符合 和 不 符合 它们 的 输入 验证 要 求 的 input 元 素 。 有 关 更 多 
输入 验证 的 信息 可 查阅 第 14 章 。 代 码 清单 18-11 展 示 了 这 两 个 选择 器 的 用 法 。 
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代码 清单 18-11 :valid 和 :invalid 选 择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 








«style» 
:invalid { 
outline: medium solid red; 
) 
:valid { 
outline: medium solid green; 
} 
</style> 
</head> 
<body> 
<form method="post" action-"http://titan:8080/form"» 
<p> 
«label for="name">Name: «input required id="name" name="name"/></label> 
</p> 
<p> 
<label for="name">City: <input required id="city" name="city"/></label> 
</p> 
<button type="submit">Submit</button> 
</form> 
</body> 
</html> 


在 代码 清单 18-11 中 ， 我 对 有 效 元 素 应 用 了 绿色 轮廓， 对 无 效 元 素 应 用 了 红色 轮廓 。 文 档 中 
有 两 个 input 元 素 ， 它 们 都 有 required 属 性 ， 这 意味 着 只 有 输入 值 这 两 个 元 素 才 有 效 。 这 两 个 选 
择 右 的 效果 如 图 18-11 所 示 。 
f , ca | eh 
y A] Example x \ dy | 
| € > C [Q titan/listings/e Y q | 


O — — —] 


























图 18-11 选择 有 效 和 无 效 的 input 元 素 
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提示 注意 提交 按钮 也 被 选中 了 ， 起 码 在 Chrome 浏 览 器 中 是 这 样 。 出 现 这 种 情况 的 原因 是 
:valid 选 择 器 背后 的 逻辑 非常 简单 : 选中 所 有 并 非 无 效 的 input 元 素 。 要 过 滤 掉 某 些 
input 元 素 ， 可 以 使 用 第 17 章 介绍 的 属性 选择 器 ， 或 者 具体 程度 更 高 的 选择 器 ， 如 接 下 
来 要 介绍 的 选择 器 。 


18.2.5 选择 限定 范围 的 input TH 


关于 输入 验证 的 一 种 具体 程度 更 高 的 变 体 是 选择 值 限于 指定 范围 的 input 元 素 。:in-range 选 
择 器 匹配 位 于 指定 范围 内 的 input 元 素 ，:out-of-range 选 择 器 匹配 位 于 指定 范围 之 外 的 input 元 
素 。 代 码 清单 18-12 展 示 了 这 些 属性 的 用 法 。 
代码 清单 18-12 ”使 用 :in-range 和 :out-of-Trange 选 择 需 


<!DOCTYPE HTML> 
































<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
:in-range { 
outline: medium solid green; 
) 
:out-of-range: { 
outline: medium solid red; 
«/style» 
«/head» 
«body» 
<form method="post" action-"http://titan:8080/form"» 
<p> 
<label for="price"> 
$ per unit in your area: 
<input type-"number" min="0" max-"100" 
value-"1" id-"price" name="price"/> 
«/label» 
</p> 
<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


之 前 我 说 过 ， 主 流 浏 览 器 还 都 没有 实现 :out-of-range 选 择 嚣 ， 只 有 Chrome 和 Opera 支 
持 :in-range 选 择 器 。 和 希望 这 一 点 能 尽快 有 所 改变 ， 因 为 这 个 功能 跟 新 的 HTML5 支 持 是 绑 定 的 ， 
很 可 能 会 得 到 广泛 应 用 。:in-range 选 择 器 的 效果 如 图 18-12 所 示 。 
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图 18-12 


18.2.6 ”选择 必需 和 可 选 的 input TH 


ure 先 择 需 匹配 具有 required 属 
相关 的 值 才 能 
匹配 没有 required 属 


代码 清单 18-13 ”选择 必需 


<!DOCTYPE HTML> 








W 











性 的 input 元 素 。 这 两 
和 可 选 的 input 元 素 








:in-range 选 择 器 的 效果 

















href-"favicon.ico" type-"image/x-icon" /> 


name="price1"/> 


name="price2"/> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel="shortcut icon" 
«style» 
:required ( 
outline: medium solid green; 
} 
:optional { 
outline: medium solid red; 
</style> 
</head> 
<body> 
<form method="post" action="http://titan:8080/form" > 
<p> 
<label for="price1"> 
$ per unit in your area: 
<input Types number min="0" max="100" required 
value-"1" id="price1" 
</label> 
<label for="price2"> 
$ per unit in your area: 
<input type="number" min="0" max="100" 
value-"1" id-"price2" 
«/label» 


</p> 


性 的 input 元 素 ， 这 能 够 确保 用 户 必需 输入 与 input 元 素 
提交 表单 ( 阅读 第 14 章 可 了 解 与 required 属 性 相关 的 更 多 信息 )。 
个 属性 都 能 在 代码 清单 18-13 中 看 到 。 


optional iti ar 


183 ”使 用 动态 伪 类 选择 器 371 





<input type="submit" value="Submit"/> 
</form> 
</body> 
</html> 


在 代码 清单 18-13 中 ， 我 定义 了 两 个 数值 类 型 的 input 元 素 ， 一 个 具有 required 属 性 ， 另 一 个 
没有 , 除 此 之 外 两 者 完全 相同 。 从 图 18-13 可 以 看 到 这 个 选择 器 的 效果 和 相应 的 样式 ,注意 ,submit 
类 型 的 input 元 素 也 被 选中 了 ， 因 为 :optional 选 择 器 不 会 分 辨 不 同类 型 的 input 元 素 。 

f Sa) 


cz 
j Example te 


€ > Q |Q titan/listings/example.ht! yg N 


S permit in your area — — — E 
| Sper witin yow areali — — — 5 
: 


| E 
图 18-13 ”选择 必需 和 可 选 的 input 元 素 





























18.3 ”使 用 动态 伪 类 选择 器 


之 所 以 称 为 动态 伪 类 选择 器 , 是 因为 它们 根据 条 件 的 改变 匹配 元 素 , 是 相对 于 文档 的 固定 状 
态 来 说 的 。 随 着 JavaScript 广 泛 用 于 修改 文档 内 容 和 元 素 状态 , 动态 选择 顺和 青 态 选择 器 之 间 的 界 
限 线 越 来 越 模糊 ， 不 过 ， 动 态 伪 类 选择 右 仍 然 是 一 类 比较 特别 的 选择 絮 。 























18.3.4 使 用 :link 和 :visited 选择 器 


:Link 选 择 需 匹配 超级 链接 ，:visited 选 择 需 匹配 用 户 已 访问 的 超级 链接 。 表 18-6 总 结 了 这 两 
个 选择 铝 。 








表 18-6 :link 和 :visited 选 择 器 








E 性 说 B CSS 版 本 
:link 选择 链接 元 素 1 
:visited 选择 用 户 已 访问 的 链接 元 素 1 




















对 于 用 户 访问 过 的 链接 , 可 在 浏览 占 中 设置 保留 已 访问 状态 的 时 间 。 当 用 户 清除 浏览 器 历史 记 
K, 或 者 历史 记录 自然 超时 , 链接 会 返回 未 访问 状态 。 代 码 清单 18-14 展 示 了 这 两 个 选择 器 的 用 法 。 


代码 清单 18-14 ”使 用 :1ink 和 :visited 选 择 器 


<!DOCTYPE HTML> 
<html> 
<head> 











372 41183 使 用 CSS 选择 器 (第 下 部 分 ) 
<title>Example</title> 
<style type="text/css"> 
:link { 
border: thin black solid; 
background-color: lightgrey; 
padding: 4px; 
color:red; 
:visited { 
background-color: grey; 
color:white; 
</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 











这 个 示例 需要 注意 的 唯一 一 点 是 : 使 用 :visited 选 择 器 可 以 应 用 到 链接 元 素 的 属性 不 多 。 你 
可 以 改变 颜色 和 字体 ， 不 过 仅 此 而 已 。 从 图 18-14 可 以 看 到 链接 被 访问 之 后 的 状态 变化 。 一 开始 
示例 中 有 两 个 未 访问 的 链接 , 我 点 击 其 中 一 个 跳 转 到 http://apress.com 网 站 , 然后 返回 HTML 文 档 ， 


已 访问 的 链接 样式 跟 以 前 不 同 了 。 


®© Example 2 
€ > QC Otitan/ist Apress 
T y 
Visit the Apress website 


Apre 























ahs) 















I like apples and oranges. 


Visi W, 


Hot Topics: .NET | iPhone | Andrii 








m 























图 18-14 使 用 :Link 和 :visited 选 择 器 





visited 选 择 器 匹配 用 户 在 所 有 页 面 访 问 过 的 href 属 性 为 URL 的 任意 链接 ， 而 不 只 是 你 


提示 
见 的 用 法 就 是 针对 已 访问 的 链接 应 用 某 种 样式 ， 从 而 让 它们 跟 未 


的 页 面 。:visited 最 常 
访问 的 链接 有 所 区 别 。 


18.3.2 ”使 用 :hovet 选择 器 


hover LE PE qe VU BO FH P! BUE ER EAE RIC s 
素 样式 会 发 生 改变 。 表 18-7 描 述 了 这 个 选择 器 。 


鼠标 在 HTML 页 面 内 移动 时 ， 选 中 的 元 
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表 18-7 = :hover 选 择 器 








选择 器 :hover 
匹配 Ue IER ERIR 
最 低 支 持 CSS 版 本 2 























浏览 器 可 以 随意 采用 某 种 方式 阐释 :nover 选 择 器 ,只 要 对 于 它 所 使 用 的 显示 行 得 通 即 可 , 不 过 
多 数 浏览 器 只 有 鼠标 在 窗口 内 移动 的 时 候 才 用 得 上 它 。 代 码 清单 18-15 展 示 了 这 个 选择 圳 的 用 法 。 


代码 清单 18-15 ”使 用 :hover 选 择 器 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
:hover { 
border: thin black solid; 
padding: 4px; 








</style> 
</head> 
<body> 
<a href="http://apress.com">Visit the Apress website</a> 
<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 


Ave Pea VER MRI, WIPI18-15 STAN 


£ 








E =o 


/ © Example . 
| € > Œ QOtitan/iistings/example.html west 


Visit the Apress website 


apples | and oranges. 
oro 


Visit the W3C website 























图 18-15 ”使 用 :hover 选 择 器 











18.3.3 ”使 用 :active 选择 器 


:active 选 择 器 匹配 当前 被 用 户 激活 的 元 素 。 浏 览 器 依然 可 以 自行 决定 如 何 诠释 激活 ， 但 多 
数 浏 览 器 会 在 鼠标 点 击 〈 在 触摸屏 上 是 手指 按压 ) 的 情况 下 使 用 这 个 选择 器 。 表 18-8 简 单 总 结 























2 
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了 :active 选 择 器 。 
表 18-8 :active 选 择 器 















































选择 器 :active 
匹配 当前 被 用 户 激活 的 元 素 ， 通 常 意味 着 用 户 即 将 点 击 ( 或 者 按压 ) 该 元 素 
最 低 支持 CSS 版 本 2 





代码 清单 18-16 给 出 了 一 个 使 用 :active 选 择 器 的 例子 。 
代码 清单 18-16 ”使 用 :active 选 择 需 


<!DOCTYPE HTML> 
<html> 


<head> 
<title>Example</title> 
<style type="text/css"> 
:active { 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 


<body> 
<a href="http://apress.com">Visit the Apress website</a> 


<p>I like <span>apples</span> and oranges.</p> 
<button>Hello</button> 
</body> 
</html> 


我 在 代码 清单 中 添加 了 一 个 按钮 ， 不 过 :active 选 择 器 不 仅 限 于 用 户 可 以 与 之 交互 的 元 素 。 
鼠标 按 在 上 面 的 任意 元 素 都 会 被 选中 ， 如 图 18-16 所 示 。 


ciel 

















Q Example 
€ > Q Q titan/listin 







Qbempe —— 
€ > C Q titan/listings/example.htn 
Visit the Apress website 9 = 


I like apples and oranges. 


(Hello) t. 









Visit the Apress website 
I like apples and oranges. 

















图 18-16 ”使 用 :active 选 择 器 


18.3.4 ”使 用 :focus 选择 器 
最 后 一 个 动态 伪 类 选择 器 是 :focus 选 择 器 ， 它 匹配 当前 获得 外 
选择 器 。 








上 点 的 元 素 。 表 18-9 总 结 了 这 








a 
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表 18-9 “ :focus 选择 器 


选择 融 :focus 
匹配 当前 获得 焦点 的 元 素 
最 低 支 持 CSS 版 本 2 


代码 清单 18-17 演 示 了 :focus 选择 器 的 用 法 。 
代码 清单 18-17 使 用 :focus 选 择 器 


<!DOCTYPE HTML> 
«html» 
«head» 
«title»Example«/title» 
«style type-"text/css"» 
:focus{ 
border: thin black solid; 
padding: 4px; 


</style> 
</head> 
<body> 
<form> 
Name: <input type="text" name="name"/> 
<p/> 
City: <input type="text" name="city"/> 
<p/> 
<input type="submit"/> 
</form> 
</body> 
</html> 


如 果 挨 个 点 击 页 面 中 的 input 元 素 ， 样 式 会 应 用 到 每 个 元 素 。 图 18-17 展 示 了 依次 点 击 三 个 
input 元 素 的 结果 。 























= >= 
© bample © Example es 
€ 3 C Otitan/listings/exq / © ampie € > C Otitan/istings/example.ht wa 
Name: || € > QC © titan/listings/ex Name: 
City: Name: Ciy: 
Submit) cw — — limes 
[Submit 








| J 


图 18-17 :focus 选 择 器 的 效果 cmm 
184 其 他 伪 类 选择 器 


还 有 几 个 选择 器 , 它们 不 适合 放 人 我 在 本 章 划 分 的 任何 一 个 选择 器 分 组 ,下面 几 节 我 们 就 来 
挨个 看 看 这 些 选择 右 。 
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18.4.1 使 用 否定 选择 器 


否定 选择 器 可 以 对 任意 选择 取 反 。 
总 结 了 这 个 选择 名。 





表 18-10 ”否定 选择 器 


选择 器 :not(< 选 择 器 >) 
匹配 对 括号 内 选择 器 的 选择 取 反 
最 低 支持 CSS 版 本 3 


代码 清单 18-18 展 示 了 否定 选择 右 的 一 种 用 法 。 
代码 清单 18-18 ”使 用 否定 选择 需 


<!DOCTYPE HTML> 
<html> 


<head> 
<title>Example</title> 
<style type="text/css"> 
a:not([href*-"apress"]) { 
border: thin black solid; 
padding: 4px; 





</style> 
</head> 


<body> 
<a href="http://apress.com">Visit the Apress website</a> 


<p>I like <span>apples</span> and oranges.</p> 
<a href="http://w3c.org">Visit the W3C website</a> 
</body> 
</html> 








这 个 选择 器 匹配 子 元 素 没 有 包含 apress 字 符 串 的 href 元 素 的 所 有 元 素 ， 
图 18-18 所 示 。 








r — x 
© Example An ee 

€ 3 Œ Otitan/listings/example.htm wi A) 

Visit the Apress website 

I like apples and oranges. 


Visit the W3C website 











图 18-18 ”使 用 否定 选择 器 





18.4.2 ”使 用 :empty 选择 器 


这 个 选择 器 可 谓 相 当 实用 ， 不 过 却 常常 被 忽略 。 表 18-10 





该 选择 器 的 效果 如 





总 结 了 这 个 选择 骨 。 这 个 选择 噩 


:empty 选 择 器 匹配 没有 定义 任何 子 元 素 的 元 素 。 表 18-11 简 单 总 结 
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不 好 演示 ， 因 为 它 匹配 的 元 素 没有 任何 内 容 。 
表 18-11 :empty 选 择 器 
选择 器 :empty 
匹配 没有 子 元 素 的 元 素 
最 低 支 持 CSS 版 本 3 
18.4.3 ”使 用 :lang 选择 器 
:lang 选 择 右 匹配 基于 lang 全 局 属性 值 的 元 素 (第 3 章 介绍 过 )。 表 18-12 总 结 了 这 个 选择 髓 。 
表 18-12 :1ang 选 择 器 
选择 器 :lang(< 目 标语 言 >) 
匹配 选择 基于 lang 全 局 属性 值 的 元 素 
最 低 支持 CSS 版 本 1 
代码 清单 18-19 展 示 了 :1ang 选 择 器 的 用 法 
代码 清单 18-19 使 用 :1ang 选 择 器 
<!DOCTYPE HTML> 
<html> 


<head> 


<title>Example</title> 
<style type="text/css"> 
:lang(en) { 
border: thin black solid 
padding: 4px; 
</style> 
</head> 
<body> 


<a lang="en-us 


id="apressanchor 
Visit the Apress website 
</a> 























class-"classi class2" href="http://apress.com"> 
<p>I like <span lang-"en-uk" class-"class2"»apples«/span» and oranges.«/p» 
«a lang="en" id-"w3canchor" href-"http://w3c.org"»Visit the W3C website</a> 
</body> 
</html> 
该 选择 髓 匹配 具有 lang 属 性 代表 其 内 容 采 用 英语 表达 的 元 素 。 APEA CREB 1 EG 
单 17-8 中 的 |= 属 性 选择 右 的 匹配 结果 一 样 
18.4.4 使 用 :target 选择 器 
在 第 3 章 我 曾经 讲 过 








， 你 可 以 为 URL 附 加 一 个 片段 标识 符 ， 以 便 直接 导航 到 基于 id 全 局 
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值 的 元 素 。 例 如 ， 如 果 HTML 文 档 example.html 中 包含 一 个 id 值 为 myelement 的 元 素 ， 那 么 你 就 可 
以 直接 通过 请 求 example.html#myelement 导 航 到 该 元 素 。:target 选 择 器 匹配 URL 片 段 标识 符 指 问 


的 元 素 。 表 18-13 简 单 总 结 了 这 个 选择 需 。 
表 18-13 :target 选 择 器 





选择 器 :target 
匹配 URL 片 段 标识 符 指向 的 元 素 
最 低 支持 CSS 版 本 3 


代码 清单 18-20 展 示 了 :target 选 择 器 的 用 法 。 
代码 清单 18-20 ”使 用 :target 选 择 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
target { 
border: thin black solid; 
padding: 4px; 
color:red; 
} 
</style> 
</head> 


<body> 
<a href="http://apress.com">Visit the Apress website</a> 


<p id="mytarget">I like <span>apples</span> and oranges.</p> 
«a id-"w3clink" href-"http://w3c.org"»Visit the W3C website</a> 


</body> 
</html> 


从 图 18-19 可 以 看 到 被 请 求 的 URL 是 如 何 改变 了 :target 选 择 器 匹配 的 元 素 。 














r 
© Example 
€ Q |Q titan/listinos/exay 

















Visit the Apress website 





@ Example 
€ > C |Q titan/listings/example.yypil#w3clink 


Visit the Apress website 
I like apples and oranges. 


Visit the W3C website 


图 18-19 使 用 :target 选 择 器 
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18.5 小结 


本 章 描述 了 CSS 选 择 器 ， 我 们 可 以 使 用 选择 器 指定 应 用 样式 的 目标 元 素 。 使 用 选择 器 可 以 匹 
配 大 量 元 素 , 组合 多 种 选择 器 也 能 将 目标 元 素 锁定 为 HTML 文档 的 特定 部 分 。 学 好 选择 器 是 高 效 
使 用 CSS 的 关键 。 











第 19 章 


本 章 介绍 对 元 素 应 用 边框 
Rad cuu 例如 ， 
些 东 西 看 起 来 很 简单 ， 可 是 如 果 CSS 中 没有 它们 ， 要 通过 其 他 方式 提供 
"mis HEB, RRA A— E 


使 用 边框 和 背景 











和 背景 样式 所 用 到 的 属性 。 这些 属 





可 以 创建 圆 角 边框 ， 








使 用 图 像 边框 ， 





导 性 都 是 使 用 相当 普遍 的 特性 , 在 
为 元 素 创建 阴影 。 或 许 






































t 这 些 特性 ， 那 开发 人 员 


会 成 功 。 表 19-1 是 本 音 内 容 的 一 个 简单 概述 。 













































































































































































表 19-1 本章 内 容 概要 
B 题 解决 方案 代码 清单 

为 元 素 应 用 边框 使 用 boder-width、boder-style 和 boder-color 属 性 19-1 
为 元 素 盒 子 的 某 一 条 边 应 用 ”使 用 特定 边 属性 ， 如 boder-top-width、border-top-style 和 19-2 
边框 border-top-color 属 性 
在 一 条 声明 中 指定 边框 的 样 ”使 用 border 属 性 设置 所 有 边 的 边框 ， 或 者 使 用 border-top、 19-3 
式 、 颜 色 和 宽度 border-bottom、border-left 和 border-right 属 性 设置 一 条 边 的 边框 

创建 圆 角 边框 使 用 border-radius 简 写 属性 或 某 个 特定 边 属 性 19-4、19-5 
使 用 图 像 创建 边框 使 用 border-image 简 写 属性 或 特定 的 相关 属性 设置 个 别 特征 19-6、19-7 
定义 背景 颜色 或 图 像 使 用 background-color 或 background-image 属 性 19-8 

指定 背景 图 像 的 位 置 使 用 background-position 属 性 19-9 
指定 背景 和 元 素 深 动 区 域 之 ”使 用 background-attachment 属 性 19-10 
间 的 关系 
指定 背景 绘制 区 域 和 可 见 裁 ”使 用 background-origin 和 background-clip 属 性 19-11、19-12 
BU X Jk 
在 一 条 声明 中 设置 所 有 的 背 使 用 background 简 写 属性 19-13 

景 相关 属性 
设置 元 素 的 盒子 阴影 使 用 pox-shadow 属 性 19-14, 19-15 


19.1 应 用 边 
先 从 控制 边 





和 padding 

















DEEN 





ER RUE 性 开始 。 这 些 属性 
属性 就 在 视觉 上 方便 多 了 。 简 单 边框 有 三 个 关键 属 怕 




















使 用 相当 普遍 ， 有 了 它们 ， 要 学 习 第 20 章 的 margin 





E: border-width、border-style 和 
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border-color。 表 19-2 描 述 了 这 三 个 属性 。 








表 19-2 基本 边框 属性 























属 性 说 明 值 
border-width 设置 边框 的 宽度 参见 表 19-3 
border-style 设置 绘制 边框 使 用 的 样式 参见 表 19-4 
border-color 设置 边框 的 颜色 < 颜色 > 














代码 清单 19-1 展 示 了 这 些 属 性 的 用 法 。 


代码 清单 19-1 定义 简单 的 边框 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 
border-width: 5px; 
border-style: solid; 
border-color: black; 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


在 代码 清单 19-1 中 , 我 使 用 p 元 素 定义 了 一 个 段落 , 使 用 style 元 素 为 这 个 段落 应 用 边框 样式 ， 
边框 样式 是 通过 设置 border-width、border-style 和 border-color 属 性 来 定义 的 。 























19.1.1 定义 边框 宽度 


border-width 属 性 的 取 值 可 能 是 常规 CSS 长 度 值 ， 可 能 是 边框 绘制 区 域 宽度 的 百分数 ， 也 可 
能 是 三 个 快捷 值 中 的 任意 一 个 。 表 19-3 描 述 了 边框 宽度 的 可 能 取 值 。 边 框 宽度 默认 值 是 medium。 






































表 19-3 ”border-width 属 性 的 取 值 Cc 
人 什 yaan 








< 长 度 值 > 将 边框 宽度 值 设 为 以 CSS 度 量 单位 (hem, px, cm) 表达 的 长 度 值 
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( 续 ) 
值 ie 明 
《百分数 > 将 边框 宽度 值 设 为 边框 绘制 区 域 的 宽度 的 百分数 
将 边框 宽度 设 为 预 设 宽度 , 这 三 个 值 的 具体 意义 是 由 浏览 器 定义 的 , 不 过 , 所 有 浏览 器 中 这 
Noi 三 个 值 代表 的 宽度 依次 增 大 


19.1.2 ”定义 边框 样式 


border-styjle 属 性 的 值 可 以 是 表 19-4 中 的 任意 一 个 。 默 认 值 是 none， 即 没有 边框 。 
表 19-4 ”border-style 属 性 的 取 值 





































































































值 说 OB 
none 没有 边框 
dashed 破 折线 式 边 框 
dotted 圆 点 线 式 边 框 
double 双 线 式 边 框 
groove 槽 线 式 边 杠 
inset 使 元 素 内 容 具 有 内 能 效果 的 边框 
outset 使 元 素 内 容 具 有 外 凸 效 果 的 边框 
Tidge PRHE 
solid 实 线 边框 
这 些 边框 的 外 观 效 果 如 图 19-1 所 示 。 
[ -一 一 -| 
| Example 
| € > Œ  QOtitan/listings/example.htm wit 


. . 
| i n K ia : Date | 
m - 
| al 


ees 了 


i 


图 19-1 border-style 属 性 不 同 取 值 的 呈现 效果 

如 果 border-color 属 性 值 设 为 black， 一些 浏览 器 在 应 用 双色 边框 样式 (如 inset 和 outset ) 
的 时 候 会 出 现 问题 。 这 些 浏 览 器 中 就 有 谷歌 Chrome， 两 种 颜色 都 会 使 用 黑色 ， 最 终 的 呈现 效果 
相当 于 实 线 边框 。 聪明 一 点 儿 的 浏览 器 知道 使 用 灰 度 , 比如 Firefox。 为 了 实现 图 19-1 中 的 效果 (用 
的 是 Chrome )， 我 将 groove inset, 、outset 和 Tridge 样 式 的 border-color 属 性 值 设 为 了 gray。 












































cr 
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19.1.3 ”为 一 条 边 应 用 边框 样式 


元 素 的 四 条 边 可 以 应 用 不 同 的 边框 样式 ， 这 就 要 用 到 特定 属性 ， 如 表 19-5 所 示 。 
表 19-5 ”特定 边 的 边框 属性 











"Hi 












































E 性 说 — H8 {a 
border-top-width 定义 顶 边 跟 通用 属性 的 值 一 样 
border-top-style 
border-top-color 
border-bottom-width 定义 底 边 跟 通 用 属性 的 值 一 样 
border-bottom-style ‘ j 
border-bottom-color 
border-left-width 定义 左边 跟 通 用 属性 的 值 一 样 
border-left-style 
border-left-color 
border-right-width 定义 右边 跟 通 用 属性 的 值 一 样 
border-right-style 














border-right-color 


可 以 使 用 这 些 属性 为 元 素 的 边 应 用 边框 样式 , 也 可 以 将 它们 与 更 为 通用 的 属性 结合 使 用 来 覆 
盖 特 定 边 的 边框 样式 。 代 码 清单 19-2 展 示 了 后 一 种 用 法 。 


代码 清单 19-2 使 用 特定 边 边框 属性 


<!DOCTYPE HTML> 
«html» 
«head» 

<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«style type-"text/css"» 


pt 








my 











a 





border-width: 5px; 
border-style: solid; 
border-color: black; 
border-left-width: 10px; 
border-left-style: dotted; 
border-top-width: 10px; 
border-top-style: dotted; 





} 

</style> 

</head> 

<body> 

<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 

</body> 

</html> 


这 些 属性 设置 的 效果 如 图 19-2 所 示 。 
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119-2 ”对 个 别 边 应 用 边框 样式 














19.1.4 ”使 用 border 简写 属性 
我 们 也 可 以 不 用 分 开设 置 样式 、 宽 度 和 颜色 ， 而 使 用 简写 属性 一 次 搞定 。 表 19-6 描 述 了 这 些 




















属性 。 
#219-6 border 简写 属性 
R 性 说 AB 值 
border 设置 所 有 边 的 边框 < 宽度 > CEA GRÉ 
border-top 设置 一 条 边 的 边框 < 宽度 > GERA GRE 





border-bottom 
border-left 
bottom-right 


可 以 在 一 行 中 指定 宽度 、 样 式 、 颜 色 的 值 从 而 为 这 些 属性 设置 值 ,也 可 以 用 空格 隔 开 ， 如 代 
码 清 单 19-3 所 示 。 
代码 清单 19-3 ”使 用 border 简 写 属性 


<!DOCTYPE HTML> 











<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
p 1 
border: medium solid black; 
border-top: solid 10px; 
} 
</style> 
</head> 


<body> 
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<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


意 ， 我 没有 为 porder-top 属 性 指定 颜色 值 。 如 果 你 忘 了 设置 某 些 值 ， 浏 览 器 会 使 用 以 前 定 
义 的 值 ， 这 里 使 用 的 是 border 简 写 属性 定义 的 颜色 。 设 置 这 些 属性 的 效果 如 图 19-3 所 示 。 


r 





py 





























EY Example Vw 
Bl temp 


| € > Œ Q titan/listings/example.htm wit 
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图 19-3 ”使 用 border 简 写 属性 


19.1.5 ”创建 圆 角 边框 
可 以 使 用 边框 的 radius 特 性 创建 圆 角 边框 。 与 该 功能 相关 的 属性 有 5 个 ， 表 19-7 是 个 总 结 


一 口 o 


m 





#219-7 圆 角 边框 属性 
































属 性 说 明 值 
png ee 设置 一 个 圆 角 一 对 长 度 值 或 百分数 值 , 百分数 跟 边 
border-bottom-left-radius 框 盒子 的 宽度 和 高 度 相关 
border-bottom-right-radius 
border-radius 一 次 设置 四 个 角 的 简写 属性 一 对 或 四 对 长 度 值 或 百分数 值 ， 由 / 
ATARI 


Bae BITE EB RT AE MMB ff, 采用 长 度 值 和 百分数 值 均 可 。 第 一 个 值 指定 水 平 曲 线 半 
径 ， 第 二 个 值 指定 垂直 曲线 半径 。 百 分 数值 是 相对 于 元 素 盒子 的 宽度 和 高 度 来 说 的 。 网 19-4 展 示 
了 两 个 半径 值 如 何 确定 一 个 圆 角 。 

从 图 中 可 以 看 出 ， 半 径 值 用 来 确定 一 个 位 于 元 素 盒 子 内 部 ， 与 元 素 盒子 相交 的 椭圆 ， 并 
决定 了 圆 角 边 框 的 形状 。 代 码 清单 19-4 中 的 样式 声明 中 使 用 了 这 两 个 值 来 定义 左上 角 的 圆 角 
边框 。 
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图 19-4 使 用 半径 指定 圆 角 


代码 清单 19-4 ”创建 圆 角 边框 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 
border: medium solid black; 
border-top-left-radius: 20px 15px; 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


如 果 只 提供 一 个 值 ,那么 水 平 半 径 和 垂直 半径 都 是 这 个 值 。 图 19-5 是 浏览 咒 中 呈现 的 样式 设 
置 的 效果 。 为 了 让 你 看 得 更 清楚 ， 我 在 旁边 对 左上 角 的 圆 角 边 框 进行 了 放大 处 理 。 























图 19-5 ”创建 圆 角 边框 
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提示 “注意 图 中 的 圆 角 接触 到 了 文本 。 要 让 元 素 的 内 容 和 边框 之 间 有 一 定 的 距离 ， 我 们 可 以 为 
元 素 盒子 添加 padding 属 性 ， 这 会 在 第 20 章 介绍 。 





使 用 border-radius 简 写 属性 可 以 为 边框 的 四 个 角 指定 一 个 值 ， 或 者 在 一 个 值 中 包含 四 个 值 ， 
做 法 如 代码 清单 19-5 所 示 。 


代码 清单 19-5 ”使 用 border-radius 简 写 属性 
<!DOCTYPE HTML> 





«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
<style type="text/css"> 
pt 
border: medium solid black; 
} 
#first { 
border-radius: 20px / 15px; 
} 
#second { 
border-radius: 50% 20px 25% 5em / 25% 15px 40px 55% 
) 
</style> 
</head> 
<body> 


<p id="first"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 


<p id="second"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


代码 清单 19-5 中 定义 了 两 个 段落 ， 每 个 段落 分 别 有 一 个 圆 角 边 框 声明 。 第 一 条 声明 只 指定 了 
两 个 值 ， 这 一 对 值 会 应 用 到 边框 的 四 个 角 上 。 注 意 , 要 用 /字符 将 水 平 半径 和 垂直 半径 隔 开 。 第 
二 条 声明 指定 了 8 个 值 。 第 一 组 的 四 个 值 分 别 是 四 个 角 的 水 平 半径 ,第 二 组 的 四 个 值 是 相应 的 垂 
直 半 径 。 两 组 值 之 间 也 用 /字符 分 开 了 。 这 两 条 声明 的 效果 如 图 19-6 所 示 。 第 二 条 声明 的 显示 结 
果 看 起 来 有 点 怪异 , 不 过 起 码 你 能 了 解 如 何在 一 条 声明 中 为 边框 定义 四 个 不 一 样 的 圆 角 , 顺带 感 
受 一 下 随意 混用 百分数 和 各 种 长 度 值 。 
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here are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types 
of apples, oranges, and other well-known fruit, we are faced with| 























图 19-6 








使 用 border-radius 简 写 属性 





19.1.6 ”将 图 像 用 做 边框 





边框 不 仅 限于 用 border-style 属 性 定义 的 样式 ,我 们 可 以 使 用 图 像 为 元 素 创建 真正 的 自 定 义 





边框 。 配 置 图 像 边 


E 各 个 方面 的 属 | 














隆 有 5 个 ， 外 加 一 个 可 以 在 一 条 声明 中 配置 所 有 特征 的 简写 属 











性 。 表 19-8 简 单 总 结 





了 这 6 个 属性 。 


表 19-8 ”border-image 属 性 


























属 性 说 OB 值 
border-image-source ”设置 图 像 来 源 none 或 者 url(< 图 像 >) 
border-image-slice —— 设置 切 分 图 像 的 偏 移 1~ 4 个 长 度 值 或 者 百分数 ， 受 图 像 的 宽度 和 高 度 影响 
border-image-width 设置 图 像 边 框 的 宽度 auto 或 1 ~ 4 个 长 度 值 或 者 百分数 
border-image-outset ”指定 边框 图 像 向 外 扩展 的 部 分 1 ~ 4 个 长 度 值 或 者 百分数 
border-image-repeat 设置 图 像 填 充 边框 区 域 的 模式 stretch、repeat 和 round 中 的 一 个 或 两 个 值 





border-image 

















在 一 条 声明 中 设置 所 有 值 的 简写 属性 

















FRY ENE, 8275 PI 








的 示例 




















问题 是 , 就 在 我 编写 这 本 书 的 时 候 , 主流 浏览 器 还 都 不 支持 这 些 属性 。 你 可 以 将 图 像 用 做 边 
HE, 但 只 能 使 用 简写 属性 , 并 且 必 须 使 用 我 们 在 第 16 章 讲 过 的 浏览 絮 厂 商 特定 前 级 (IESE EAN SZ 
持 这 个 特性 )。 因 此 ， 这 里 我 可 以 演示 一 下 基本 特性 ， 不 过 单独 的 属性 就 不 行 了 。 浏 览 右 特定 的 





简写 属性 跟 border-i 
节 的 示例 移植 到 标准 
1. 切 分 图 像 

















age 


属性 中 。 























放 性 的 用 法 一 样 ， 因 此 ， 如 果 浏 览 器 支持 相应 的 属性 ， 你 完全 可 以 将 本 





将 图 像 用 做 边框 的 关键 是 切 分 图 像 。 开发 人 员 指 定 图 像 边框 向 内 偏 移 的 值 , 浏览 器 会 使 用 这 


些 值 来 将 图 像 切 分 为 9 块 。 为 了 演示 切 分 效果 ， 我 创建 了 一 个 图 像 ， 





它 能 简单 明了 地 表达 浏览 
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如 何 进行 切 分 以 及 使 用 每 块 切 分 图 (tile )， 如 图 19-7 所 示 。 


30px 
E> 90px | 














图 19-7 ”为 演示 图 像 边 框 特性 设计 的 图 像 
该 图 像 大 小 为 90px x 90px, 每 个 切 分 图 是 30px x 30px。 中 间 的 切 分 图 是 透明 的 。 要 切 分 图 像 ， 
应 该 提供 图 像 边框 在 四 个 方向 上 向 内 偏 移 的 值 ， 用 长 度 值 或 者 相对 图 像 尺 寸 的 百分数 表示 均 可 。 
可 以 提供 四 个 不 同 的 值 ， 也 可 以 只 提供 两 个 值 ( 分别 代表 水 平方 向 和 垂直 方向 的 偏 移 量 )， 当 然 
只 有 一 个 值 也 可 以 ( 四 个 偏 移 量 一 样 )。 对 于 这 个 图 像 ， 我 使 用 了 一 个 值 : 30px， 创 建 了 需要 的 
切 分 ， 如 图 19-8 所 示 。 











30px 


30px 











图 19-8” 切 分 边框 图 像 


切 分 图 像 后 生成 8 个 切 分 图 ， 标 记 为 1、3、6、8 的 切 分 图 分 别 用 于 绘制 边框 的 四 个 角 ， 标 记 
为 2、4、5、7 的 切 分 图 分 别 用 来 绘制 边框 的 四 条 边 。 代 码 清单 19-6 展 示 了 浏览 器 特定 属性 如 何 切 
分 图 像 并 将 切 分 图 用 于 边框 样 式 。 


代码 清单 19-6 ” 切 分 图 像 并 将 其 用 做 边框 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«style type-"text/css"» 
p t 




















-webkit-border-image: url(bordergrid.png) 30 / 50px; 
-moz-border-image: url(bordergrid.png) 30 / 50px; 
-o-border-image: url(bordergrid.png) 30 / 50px; 
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} 

</style> 

</head> 

<body> 

<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 

</body> 

</html> 


每 个 属性 声明 的 参数 都 一 样 。 必 须 使 用 url 功 能 指定 图 像 来 源 ( 因为 CSS 规 范 保留 了 实现 获取 
图 像 其 他 方式 的 权利 )。 每 条 声明 中 ， 我 只 提供 了 一 个 切 分 值 30， 跟 示例 图 像 中 的 切 分 图 尺寸 一 
FÉ. TER: 指定 切 分 尺寸 不 需要 单位 ， 默 认 使 用 px。 

切 分 值 和 边框 宽度 值 之 间 使 用 了 /字符 进行 分 制 。 可 以 为 元 素 的 每 条 边 指 定 不 同 的 宽度 ， 不 
过 此 处 只 提供 了 一 个 值 ( 50px ), 即 四 条 边 都 会 使 用 这 个 值 。 图 19-9 展 示 了 Chrome 中 的 效果 ,Firefox 
和 Opera 看 起 来 基本 一 样 。 






































ay Example 
BY Examp 





€ > C |QOtitan/listings/examplehtmi| 家 入 


| banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 











IHI 


图 19-9 ABE AH 
可 以 从 图 中 看 到 浏览 器 是 如 何 使 用 每 块 切 分 图 的 。 标 记 为 2 和 7 的 切 分 图 有 点 不 好 辨认 , 它们 
分 别 用 到 了 顶 边 和 底 边 上 。 

2. 控制 切 分 图 重复 方式 

在 图 19-9 中 ， 为 了 填 满 边框 的 整个 空间 ， 切 分 图 被 拉 伸 了 。 我 们 可 以 改变 图 像 重 复方 式 ， 得 

到 不 同 的 呈现 效果 。border-image-Tepeat 属 性 就 能 实现 这 个 功能 , 不 过 , 使 用 简写 属性 也 能 指定 

重复 样式 。 表 19-9 描 述 了 定义 重复 样式 的 值 。 

表 19-9 border-image-repeat 样 式 的 值 




































































值 说 — 8j 
stretch 拉 伸 切 分 图 填 满 整个 空间 ， 默 认 值 
repeat 平 铺 切 分 图 填 满 整 个 空间 ( 可 能 导致 图 片 被 截断 ) 
round 在 不 截断 切 分 图 的 情况 下 ， 平 铺 切 分 图 并 拉 伸 以 填 满 整个 空间 
Space 在 不 截断 切 分 图 的 情况 下 ， 平 铺 切 分 图 并 在 图 片 之 间 保留 一 定 的 间距 以 填 满 整个 空间 
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在 撰写 本 书 过 程 中 ,浏览 器 对 重复 样式 值 的 支持 还 参差 不 齐 。 所 有 的 浏览 器 都 不 支持 space 
值 ，Chrome 不 支持 round 值 。 代 码 清 单 19-7 展 示 的 是 在 Firefox 中 使 用 repeat 和 round 值 改变 边框 的 
重复 样式 。 
代码 清单 19-7 ”控制 切 分 图 的 重复 样式 


«IDOCTYPE HTML» 


«html» 
«head» 
«title»Example«/title» 
«meta name-"author" content-"Adam Freeman"/» 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
p t 
-moz-border-image: url(bordergrid.png) 30 / 50px round repeat; 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 








在 代码 清单 19-7 中 , 第 一 个 值 指 定 了 切 分 图 的 水 平 重复 样式 , 第 二 个 值 指定 了 垂直 重复 样式 。 
如 果 只 提供 一 个 值 ， 那 么 水 平和 垂直 重复 样式 一 样 。 从 图 19-10 中 可 以 看 出 这 两 个 值 的 区 别 。 














|B Example | +] - 
(€; > wa http://titan/listings/example.htm! dit. 








2222222222222222]i 


4 There are lots of different kinds of fruit - there are over 500 varieties of 


banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 


6/777777777777171118, 


图 19-10 ”指定 边框 切 分 图 片 重复 方式 的 round 和 repeat 值 


注意 : 顶 边 和 底 边 不 包含 任何 截断 的 切 分 图 。 数字 2 和 7 先 被 稍微 拉 伸 了 一 下 , 然后 再 平 铺 ， Cc 
B T. 相反 ,左边 和 右边 仅 使 用 了 repeat 样 式 ， 为 了 填 满 整个 空间 就 有 被 截断 
的 图 。 
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19.2 设置 元 素 的 背景 


盒 模型 的 另 一 个 可 见 区 域 是 元 素 的 内 容 。 本 节 我 们 就 来 学 习 一 下 定义 内 容 区 域 的 背景 样式 
需要 用 到 的 属性 。( 如 何 为 内 容 本 身 应 用 样式 ， 请 参阅 第 22 章 。) 表 19-10 列 出 了 本 节 即 将 介绍 
的 属性 。 




















表 19-10 ”背景 属性 







































































































































































属 性 说 明 值 
background-color 设置 元 素 的 背景 颜色 ， 总 是 显示 在 背景 图 像 下 面 < 颜色 》 
background-image 设置 元 素 的 背景 图 像 ， 如 果 指 定 一 个 以 上 的 图 像 , 则 后 面 的 图 像 ” none 或 url( 图 像 ) 

绘制 在 前 面 的 图 像 下 面 

background-repeat 设置 图 像 的 重复 样式 参见 表 19-11 
background-size 设置 背景 图 像 的 尺寸 参见 表 19-12 
background-position 设置 背景 图 像 的 位 置 参见 表 19-13 
background-attachment 设置 元 素 中 的 图 像 是 否 固定 或 随 页 面 一 起 滚动 参见 表 19-14 
background-clip 设置 背景 图 像 裁剪 方式 参见 表 19-15 
background-origin 设置 背景 图 像 绘制 的 起 始 位置 参见 表 19-15 
background 简写 属性 参见 下 文 











19.2.1 设置 背景 颜色 和 图 像 


设置 元 素 背景 的 起 点 是 设置 背景 颜色 或 者 背景 图 像 , 也 可 以 使 用 背景 属性 同时 设置 两 者 ， 如 
代码 清单 19-8 所 示 。 


代码 清单 19-8 ”设置 背景 图 像 和 颜色 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pi 








ni 

















border: medium solid black; 
background-color: lightgray; 
background-image: url(banana.png); 
background-size: 40px 40px; 
background-repeat: repeat-x; 
} 
</style> 
</head> 





<body> 

<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 

</body> 

</html> 


在 上 面 这 个 例子 中 ， 我 将 背景 颜色 设置 为 浅 灰 色 ， 并 使 用 url 加 载 了 一 张 名 为 banana.png 的 图 
18, 将 其 作为 background-image 属 性 的 值 。 从 图 19-11 可 以 看 到 这 张 图 像 的 效果 。 背 景 图 像 总 是 显 
示 在 背景 颜色 之 上 。 


g j Y 

















j 贺 Example x N 


€ > C! |Q titan/listings/example. W| A 





SS Noe ao ET TERES em other well-known 
fruit, we are faced with thousands of choices. 
































图 19-11 使 用 背景 颜色 和 图 像 


这 个 背景 图 像 多 少 有 些 遮盖 了 元 素 中 的 文本 , 除非 非常 小 心 , 添加 背景 图 像 通常 都 会 出 现 这 
种 情况 。 你 应 该 注意 到 了 图 19-11 中 的 香蕉 图 像 水 平 重复 穿 过 了 元 素 。 使 用 background-repeat 属 
性 可 以 实现 这 种 效果 ， 表 19-11 列 出 了 该 属性 的 可 能 取 值 。 


表 19-11 _ background-repeat 属 性 的 值 





















































































































































值 说 AA 
repeat-x 水 平方 向 平 铺 图 像 ， 图 像 可 能 被 截断 
repeat-y 垂直 方向 平 铺 图 像 ， 图 像 可 能 被 截断 
repeat 水 平和 垂直 方向 同时 平 铺 图 像 ， 图 像 可 能 被 截断 
space 水 平 或 者 垂直 方向 平 铺 图 像 ， 但 在 图 像 与 图 像 之 间 设置 统一 间距 ， 确 保 图 像 不 被 截断 
round 水 平 或 者 垂直 方向 平 铺 图 像 ， 但 调整 图 像 大 小 ， 确 保 图 像 不 被 截断 
no-repeat 禁止 平 铺 图 像 














我 们 可 以 单独 指定 水 平方 向 和 垂直 方向 的 重复 样式 , 要 是 只 有 一 个 值 的话 , 两 个 方向 均 会 使 
用 同 种 重复 样式 。repeat-x 和 repeat-y 是 例外 ， 浏 览 器 对 于 后 者 使 用 no-repeat 样 式 。 
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19.2.2 ”设置 背景 图 像 的 尺寸 


在 上 一 节 中 , 我 指定 的 图 像 对 于 元 素来 说 太 大 了 , 因此 代码 中 使 用 了 background-size 属 性 将 
图 像 调整 为 40 像 素 x 40 像 素 。 除 了 使 用 长 度 值 , 属性 值 还 可 以 是 百分数 ( 跟 图 像 的 宽度 和 高 度 相 
关 )、 预 定义 值 ( 如 表 19-12 所 示 )。 


#219-12 background-size 属 性 的 值 


















































值 说 ” 明 
contain 等 比例 缩放 图 像 ， 使 其 宽度 、 高 度 中 较 大 者 与 容器 横向 或 纵向 重合 ， 背 景 图 像 始终 包含 在 容器 内 
cover 等 比例 缩放 图 像 ， 使 图 像 至 少 覆 盖 容 器 ， 有 可 能 超出 容器 

auto 默认 值 ， 图 像 以 本 身 尺 寸 完 全 显示 








contain 值 确保 图 像 调整 尺 寸 后 ， 整 个 图 像 始终 包含 在 元 素 内 部 。 浏 览 器 判断 图 像 长 度 和 高 
度 哪个 更 大 ， 并 将 较 大 者 调整 至 容器 相应 宽度 或 者 高 度 大 小 。 相 反 ， 如 果 属 性 取 cover 值 ， 浏 览 
右 选 中 较 小 的 值 ， 并 沿 着 该 方向 调整 图 像 大 小 。 这 就 意味 着 图 像 的 某 一 部 分 可 能 不 会 显示 ， 从 
图 19-12 中 可 以 看 出 两 者 的 不 同 之 处 。 

f _ EET) 
Bi Example x c 、 
€ -3 Œ Qttan/listings/examplehtml yy | A | 





























bf different kinds of fruit - there are over 500 
a alone. By the time we add the countless 























图 19-12 ”背景 图 像 尺 寸 样式 之 contain 与 coveT 














香 巷 图像 的 高 度 要 比 宽度 大 ， 这 就 是 说 你 在 使 用 cover 值 的 时 候 ， 应 该 调整 图 像 尺 寸 ， 使 得 
宽度 方向 上 能 被 完全 显示 ， 即 使 这 会 导致 高 度 方向 上 显示 不 完整 。 这 个 呈现 效果 可 以 从 图 19-12 
上 面 的 元 素 背景 图 像 设 置 看 出 来 。 要 是 使 用 contain 值 ， 就 必须 确保 高 度 方向 能 在 元 素 盒子 中 完 
整 呈现 ,也 就 是 说 能 显示 完整 的 图 像 ， 即 使 最 终 图 像 不 能 覆盖 整个 背景 区 域 。 这 个 取 值 的 呈现 效 
果 可 以 从 图 19-12 下 面 的 元 素 背 景 图 像 设 置 看 出 来 。 
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19.2.3 置 背 景 图 像 位 置 


浏览 器 使 用 background-position 属 性 设置 背景 图 像 的 位 置 。 图 像 不 平 铺 的 时 候 这 个 
最 多 。 该 属性 的 使 用 方法 如 代码 清单 19-9 所 示 。 


代码 清单 19-9 ”设置 背景 图 像 位 置 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<style type="text/css"> 
pt 
border: 10px double black; 
background-color: lightgray; 
background-image: url(banana.png); 
background-size: 40px 40px; 
background-repeat: no-repeat; 
background-position: 30px 10px; 

















mj 





} 

</style> 

</head> 

<body> 

<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 

</body> 

</html> 





诉 浏览 器 将 背景 图 像 设 置 为 距离 左边 界 30 像 素 , 距离 顶部 边界 10 像 素 。 
定位 置 ， 你 也 可 以 使 用 表 19-13 中 列 出 的 预定 义 值 。 


#219-13 ” background-position 属 性 的 值 
值 说 明 


这 条 声明 告 


了 长 度 单位 指 




















这 里 使 用 
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图 像 定 位 到 盒子 顶部 边界 
图 像 定 位 到 盒子 左边 界 
图 像 定 位 到 盒子 右边 界 
图 像 定 位 到 盒子 底部 边界 
图 像 定 位 到 中 间 位 置 
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right 
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right 和 center。 从 图 19-13 中 可 以 看 出 设置 图 像 位 置 的 效果 。 














第 一 个 值 控制 垂直 位 置 , 可 以 是 top、bottom 和 center, 第 二 个 值 控制 水 平 位 置 , 可 以 是 left、 
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By Example 
€ > QC |Qtitan/listings/example.htm wo 


ere are lots of different kinds of fruit - there are over 500 varieties of 
| e. By the time we add the countless types of apples, 


—4nd other well-known fruit, we are faced with thousands of 
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图 19-13 ”设置 背景 图 像 的 位 置 





19.24 设置 元 素 的 背景 附着 方式 























为 具有 视窗 的 元 素 应 用 背景 时 ， 可 以 指定 背景 附着 内 容 的 方式 。textarea 是 常见 的 具有 视窗 
的 元 素 〈 详情 请 参阅 第 14 章 )， 可 以 自动 添加 滚动 条 以 显示 内 容 。 另 一 个 例子 是 body 元 素 ， 如 果 
其 中 的 内 容 比 浏览 器 的 窗口 长 ， 可 以 为 其 设置 滚动 条 ( 有 关 pbody 元 素 的 详细 内 容 请 见 第 7 章 )。 使 

















用 background-attachment 属 性 可 以 控制 背景 的 附着 方式 。 表 19-14 列 出 了 该 





ni 
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属性 的 可 能 取 值 。 















































表 19-14 background-attachment 属 性 的 值 
值 说 明 
fixed 背景 固定 到 视窗 上 ， 即 内 容 滚动 时 背景 不 动 
Tocal 背景 附着 到 内 容 上 ， 即 背景 随 内 容 一 起 滚动 
scroll 背景 固定 到 元 素 上 ， 不 会 随 内 容 一 起 滚动 





























代码 清单 19-10 展 示 了 对 textarea 元 素 使 用 background-attachment 属 性 。 


代码 清单 19-10 ”使 用 background-attachment 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
textarea ( 
border: medium solid black; 
background-color: lightgray; 
background-image: url(banana.png); 
background-size: 60px 60px; 
background-repeat: repeat; 
background-attachment: scroll; 
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</style> 

</head> 

<body> 

<p> 
<textarea rows="8" cols="30"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</textarea> 

</p> 

</body> 

</html> 


这 里 无 法 在 图 中 演示 各 种 附着 模式 的 不 同 之 处 了 , 效果 只 有 在 自己 的 浏览 器 中 才能 看 到 。 想 
看 看 fixed 和 scrol1 模 式 的 区 别 , 可 以 使 用 示例 中 的 HTML 文 档 , 将 浏览 器 窗口 调整 到 无 法 完整 显 
示 文 本 区 域 ，scrol1 模 式 会 启用 浏览 器 的 滚动 条 ( 而 不 是 文本 区 域 的 滚动 条 )。 


19.2.5 ”设置 背景 图 像 的 开始 位 置 和 裁剪 样式 


背景 的 起 始点 (origin ) 指定 背景 颜色 和 背景 图 像 应 用 的 位 置 。 裁 剪 样式 决定 了 背景 颜色 和 
图 像 在 元 素 盒子 中 绘制 的 区 域 。packground-origin 和 background-clip 属 性 控制 着 这 些 特 性 ， 两 
者 都 可 以 取 以 下 三 个 值 ， 如 表 19-15 所 示 。 


表 19-15 ”background-origin 和 background-clip 属 性 的 值 



















































































值 说 — 8j 
border-box 在 边框 盒子 内 部 绘制 背景 颜色 和 背景 图 像 
padding-box 在 内 边 距 盒子 内 部 绘制 背景 颜色 和 背景 图 像 
content-box 在 内 容 盒子 内 部 绘制 背景 颜色 和 背景 图 像 























代码 清单 19-11 展 示 了 background-origin 属 性 的 用 法 。 
代码 清单 19-11 使 用 background-origin 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 











border: 10px double black; 
background-color: lightgray; 
background-image: url(banana.png); 
background-size: 40px 40px; 
background-repeat: repeat; 
background-origin: border-box; 
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} 

</style> 

</head> 

<body> 

<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 

</body> 

</html> 


在 代码 清单 19-11 中 , 我 使 用 了 border-box 值 , 也 就 是 说 浏览 器 会 在 边框 下 面 绘制 背景 颜色 和 
背景 图 像 。 之 所 以 说 “下 面 ”， 是 因为 边框 肯定 会 绘制 在 背景 上 。 从 图 19-14 可 以 看 出 packground- 
origin 属 性 值 为 border-box 的 效果 。 
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图 19-14 使 用 background-origin 属 性 


通过 应 用 裁剪 盒子 , background-clip 属 性 决定 了 背景 的 哪 一 部 分 是 可 见 的 。 裁 剪 盒子 之 外 的 
部 分 一 律 被 丢弃 ， 不 会 显示 。background-clip 属 性 的 三 个 可 能 的 取 值 跟 packground-origin 属 性 
一 样 ， 代 码 清单 19-12 展 示 了 如 何 组 合 使 用 这 些 属性 。 


IgE 























n 


代码 清单 19-12 ”使 用 background-clip 属 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 


2 


border: 10px double black; 
background-color: lightgray; 
background-image: url(banana.png); 
background-size: 40px 40px; 
background-repeat: repeat; 
background-origin: border-box; 
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background-clip: content-box; 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


两 者 一 起 使 用 ,告诉 浏览 器 在 边框 盒子 内 部 绘制 背景 , 但 是 丢弃 内 容 盒子 之 外 的 部 分 。 最 终 
的 呈现 效果 跟 图 19-14 相 比 只 有 细微 的 差别 ， 如 图 19-15 所 示 。 


F 























& 





























图 19-15 ”一 起 使 用 background-origin 和 background-clip 属 改 





PT 


19.2.6 ”使 用 background 简写 属性 


使 用 background 简 写 属性 可 以 在 一 条 声明 中 设置 所 有 的 背景 值 。 以 下 是 background 属 性 值 的 
格式 ， 其 中 包括 多 个 单独 的 属性 : 


background: <background-color> <background-position> <background-size> 
<background-repeat> <background-origin> <background-clip> <background-attachment> 
«background-image» 


这 条 声明 真 够 长 的 , 不 过 其 中 有 些 值 可 以 省 略 。 对 于 省 略 的 值 ， 浏览 器 会 用 默认 值 蔡 代 。 代 
码 清单 19-13 展 示 了 background 简 写 属 性 的 用 法 。 


代码 清单 19-13 ”使 用 background 简 写 属性 


<!DOCTYPE HTML> 
«html» 
«head» 
«title»Example«/title» 
«meta name-"author" content-"Adam Freeman" /> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
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<style type= 
pt 

bor 

bac 


j 

«/style» 

«/head» 

«body» 
«p» 
There are lo 
of banana al 
and other we 
</p> 

</body> 

</html> 


"text/css"» 


der: 10px double black; 
kground: lightgray top right no-repeat border-box content-box 
local url(banana.png); 


ts of different kinds of fruit - there are over 500 varieties 
one. By the time we add the countless types of apples, oranges, 
ll-known fruit, we are faced with thousands of choices. 





ny 





"uni 


一 条 属性 设置 等 价 于 同时 设置 以 下 几 个 属性 : 


background-color: li 
background-position: 
background-repeat: n 
background-origin: b 
background-clip: con 
background-attachmen 
background-image: ur 


ghtgray; 
top right; 
o-repeat; 
order-box; 
tent-box; 
t: local; 
l(banana.png); 





提示 “当前 ， 有 的 浏览 器 还 不 支持 这 个 简写 属性 。 


19.3 创建 盒子 阴影 














备 受 开发 人 员 热切 








期 待 的 一 个 CSS3 特 性 是 为 元 素 的 盒子 添加 阴影 效果 。 这 





属性 来 实现 ， 表 19-16 描 述 了 这 个 属性 的 使 用 情况 。 


#219-16 ”box-shadow 属 性 


过 box-shadow 





属 性 说 明 值 
box-shadow 为 元 素 指 定 阴影 参见 表 19-17 


box-shadow 元 素 的 值 组 成 如 下 : 


box-shadow: hoffse 





t voffset blur spread color inset 


每 个 值 代 表 的 意思 如 表 19-17 所 示 。 


值 


表 19-17 “box-shadow 属 性 的 值 
说 明 








hoffset 阴影 的 水 平 偏 移 量 ， 是 一 个 长 度 值 ， 正 值 代 表 阴 影 向 右 偏 移 ， 负 值 代表 阴影 向 左 偏 移 
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( 续 ) 
值 说 OBB 

voffset 阴影 的 垂直 偏 移 量 ， 是 一 个 长 度 值 ， 正 值 代表 阴影 位 于 元 素 盒子 下 方 ， 负 值 代表 阴影 位 于 元 素 盒子 上 方 
blur (可 选 ) 指定 模糊 值 ， 是 一 个 长 度 值 ， 值 越 大 盒子 的 边界 越 模糊 。 默 认 值 为 0， 边 界 清 晰 

Spread (可 选 ) 指定 阴影 的 延伸 半径 ,是 一 个 长 度 值 ， 正 值 代表 阴影 向 盒子 各 个 方向 延伸 扩大 ， 负 值 代表 阴影 沿 

相反 方向 缩小 

color PE) 设置 阴影 的 颜色 ， 如 果 和 省略 ， 浏 览 器 会 自行 选择 一 个 颜色 

inset (可 选 ) 将 外 部 阴影 设置 为 内 部 阴影 ( 内 嵌 到 盒子 中 ) ， 参 见 代 码 清单 19-15 中 的 示例 
警告 


省 略 color 值 的 时 候 应 该 留意 。color 值 可 选 ， 浏览 器 可 以 自行 应 用 标准 颜色 ,可 能 是 菜 种 
适合 用 户 的 操作 系统 或 浏览 器 的 颜色 。 不 过 ,在 本 书 撰写 过 程 中 ,基于 webkit 的 浏览 器 在 


不 指定 color 值 的 情况 下 不 会 绘制 边框 。 出 于 这 个 原因 ， 最 好 在 pox-shadow 属 性 中 明确 指 
定 color 值 。 








"uni 
E 


代码 清单 19-14 展 示 了 box-shadow 属 性 的 用 法 。 
代码 清单 19-14 ”创建 盒子 阴影 效果 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 


«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 


p t 
border: 10px double black; 


box-shadow: 5px 4px 10px 2px gray; 
} 
</style> 
</head> 
<body> 
<p> 


There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 


and other well-known fruit, we are faced with thousands of choices. 
</p> 


</body> 
</html> 


box-shadow 属 性 设置 的 效果 如 图 19-16 所 示 。 
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| [[There are lots of different kinds of fruit - there are over 5f 
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图 19-16 ”为 元 素 设置 盒子 阴影 


我 们 可 以 在 一 条 box-shadow 声 明 中 定义 多 个 阴影 ， 只 需要 用 逗号 分 隔 每 条 声明 即 可 ， 如 代码 
清单 19-15 所 示 。 


代码 清单 19-15 ”为 一 个 元 素 应 用 多 个 阴影 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 
border: 10px double black; 
box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset; 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 

















上 面 的 代码 中 定义 了 两 个 阴影 ， 其 中 一 个 是 内 部 阴影 ， 效 果 如 图 19-17 所 示 。 
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图 19-17 ”为 一 个 元 素 定 义 多 个 阴影 





19.4 ”应 用 轮廓 


轮廓 对 于 边框 来 说 是 可 选 的 。 轮 廓 最 有 用 的 地 方 在 于 短 时间 抓 住 用 户 对 某 个 元 素 的 注意 力 ， 
如 必须 按压 的 按钮 或 者 数据 输入 中 的 错误 。 轮廓 绘制 在 盒子 边框 的 外 面 。 边框 和 轮廓 最 大 的 区 别 


是 : 轮廓 不 属于 页 面 ， 因 此 应 用 轮廓 不 需要 调整 页 面 布 局 。 表 19-18 列 出 了 与 轮廓 相关 的 属性 。 
表 19-18 轮廓 属性 



























































m 性 说 OBA 值 
outline-color 设置 外 围 轮 廓 的 颜色 JR e» 
outline-offset 设置 轮廓 距离 元 素 边 框 边缘 的 偏 移 量 《长度 > 
outline-style 设置 轮廓 样式 跟 border-style 属 性 的 值 一 样 ， 参 见 表 19-4 
outline-width 设置 轮廓 的 宽度 thin, medium, thick, <K/E> 
outline 在 一 条 声明 中 设置 轮廓 的 简写 属性 < 颜色 》 dio cob 











No a 应 用 轮廓 。 为 了 说 明 如 何在 不 重新 设置 页 面 布 局 的 情况 下 绘制 
轮廓 ， 这 个 示例 中 包含 了 一 个 简单 的 脚本 。 


代码 清单 19-16 ”应 用 轮廓 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon 


«style» 


pt 
width: 3096; 
padding: 5px; 
border: medium double black; 


"Jy 
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background-color: lightgray; 
margin: 2px; 
float: left; 
} 
#fruittext { 
outline: thick solid red; 
} 


</style> 
</head> 
<body> 

<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 
</p> 
«p id-"fruittext"» 
There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 


" 








</p> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 





</p> 
<button>Outline Off</button> 
<button>Outline On</button> 
<script> 
var buttons = document.getElementsByTagName("BUTTON") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
var elem = document.getElementById("fruittext") ; 
if (e.target.innerHTML == "Outline Off") { 
elem.style.outline = "none"; 
} else { 
elem.style.outlineColor = "red"; 
elem.style.outlineStyle = "solid"; 
elem.style.outlineWidth = "thick"; 

















B 
} 
</script> 
</body> 
</html> 


图 19-18 显 示 了 应 用 轮廓 的 效果 。 注 意 一 下 元 素 为 何 没有 改变 位 置 ， 这 是 因为 在 页 面 布局 中 
没有 为 轮廓 分 配 空间 。 
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图 19-18 ”为 元 素 应 用 轮廓 
































19.5 ”小结 


本 章 我 们 学 习 了 为 元 素 盒子 添加 边框 、 背 景 和 轮廓 用 到 的 属性 。 

你 可 以 从 一 组 简单 的 样式 中 选择 某 种 边框 , 也 可 以 使 用 图 像 完全 自 定义 边框 。 对 于 设置 图 像 
边框 来 说 ， 最 关键 的 是 切 分 图 像 ， 即 将 一 个 图 像 分 为 几 部 分 ， 然 后 将 它们 用 来 绘制 边框 。 

我 们 可 以 进一步 为 边框 设置 背景 。 前 面 讲解 了 如 何 创建 背景 颜色 和 图 像 , 如 何 配置 以 便 它 们 
与 元 素 盒 子 的 其 余部 分 协调 。 本 章 最 后 演示 了 如 何 为 元 素 添 加 阴影 效果 。 阴 影 效果 和 圆 角 边框 是 
CSS3 中 有 关 边 框 和 背景 设置 最 主要 的 新 特性 。 


























使 用 盒 模型 


























本 章 讲解 配置 元 素 盒 模型 的 CSS 属 性 。 我 在 第 16 章 解释 过 ， 盒 子 是 CSS 中 的 基础 概念 ， 我 们 
需要 使 用 它 来 配置 元 素 的 外 观 以 及 文档 的 整体 布局 。 表 20-1 是 本 章 内 容 的 一 个 简单 概述 。 























表 20-1 本章 内 容 概要 




















































































































































































































































































































问 题 解决 方案 代码 清单 

设置 盒子 内 边 距 区 域 的 尺寸 使 用 padding 简 写 元 素 , 或 padding-top、padding-bottom、 20-1, 20-2 
padding-left、padding-right 属 性 

设置 盒子 外 边 距 区 域 的 尺寸 使 用 margin 简 写 元 素 ， 或 margin-top margin-bottom, 20-3 
margin-left、margin-right 属 性 

设置 元 素 的 尺寸 使 用 width 和 height 属 性 20-4 

设置 尺寸 应 用 到 盒子 的 哪 一 部 分 使 用 pox-sizing 属 性 20-4 

为 元 素 大 小 设置 范围 使 用 max-width、min-width、max-height、min-height 属 性 20-5 

设置 元 素 洪 出 内 容 的 处 理 方式 使 用 overflow、overflow-x、overflow-y 属 性 20-6、20-7 

设置 元 素 的 可 见 性 使 用 visibility 属 性 (也 可 以 使 用 display 属 性 取 none 值 ) 20-8 

设置 元 素 盒子 的 类 型 使 用 display 属 性 = 

设置 元 素 盒子 的 类 型 ， 使 元 素 在 垂直 方向 上 使 用 display 属 性 的 block 值 20-9 

区 别 于 周围 元 素 

设置 盒子 类 型 , 使 元 素 显 示 为 段落 中 的 一 个 字 ”使 用 display 属 性 的 inline 值 20-10 

设置 盒子 的 类 型 ， 使 元 素 对 外 具有 行内 元 素 ”使 用 display 属 性 的 inline-block 值 20-11 

的 属性 ， 对 内 具有 块 元 素 的 属性 

设置 盒子 的 类 型 ， 使 元 素 的 显示 方式 依赖 其 ”使 用 display 属 性 的 run-in 值 20-12, 20-13 

周围 的 元 素 

隐藏 元 素 及 其 内 容 使 用 display 属 性 的 none 值 20-14 

将 元 素 移动 到 其 包含 块 的 左边 界 或 右边 界 ， ”使 用 float 属 性 20-15 

或 者 另 一 个 浮动 元 素 的 边界 

设置 盒子 的 左边 界 、 右 边界 或 左右 两 个 边界 ”使 用 clear 属 性 20-16 























不 允许 出 现 浮动 元 素 
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20.1 为 元 素 应 用 内 边 距 


应 用 内 边 距 会 在 元 素 内 容 和 边框 之 间 添 加 空白 ,我 们 可 以 为 内 容 盒 的 每 个 边界 单独 设置 内 边 
WB, 或 者 使 用 padding 简 写 属 性 在 一 条 声明 中 设置 所 有 的 值 。 表 20-2 列 出 了 padding 相 关 属 性 。 


表 20-2 ”内 边 距 属性 
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属 性 说 明 值 
padding-top 为 顶 边 设置 内 边 距 长 度 值 或 者 百分数 
padding-right 为 右边 设置 内 边 距 长 度 值 或 百分数 
padding-bottom 为 底 边 设置 内 边 距 长 度 值 或 百分数 
padding-left 为 左边 设置 内 边 距 长 度 值 或 百分数 
padding 简写 属性 ， 在 一 条 声明 中 设置 所 有 边 的 内 边 距 1 一 4 个 长 度 值 或 百分数 
如 果 使 用 百分数 值 指定 内 边 距 ， 百 分 数 总 是 跟 包 含 块 的 宽度 相关 ， 高 度 不 考虑 在 内 。 代 码 清 























单 20-1 展 示 了 如 何 为 元 素 应 用 内 边 距 。 
代码 清单 20-1 ”为 元 素 应 用 内 边 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«style type-"text/css"» 
pt 
border: 10px double black; 
background-color: lightgray; 
background-clip: content-box; 
padding-top: 0.5em; 
padding-bottom: 0.3em; 
padding-right: 0.8em; 
padding-left: 0.6em; 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


在 代码 清单 20-1 中 ， 我 为 盒子 的 每 条 边 应 用 了 不 同 的 内 边 距 ， 从 图 20-1 中 可 以 看 出 效果 。 此 
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外 ， 我 设置 了 background-clip 属 性 (参见 第 19 章 )， 因 此 内 边 距 区 域 不 会 显示 背景 颜色 ， 这 样 可 
以 突出 内 边 距 的 效果 。 
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There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless 


types of apples, oranges, and other well-known fruit, we are 
faced with thousands of choices. 


























图 20-1 ”为 元 素 应 用 内 边 距 

















我 们 也 可 以 使 用 padding 简 写 属性 在 一 条 声明 中 为 四 条 边 设 置 内 边 距 。 可 以 为 这 个 属性 指定 
1~4 值 。 如 果 指 定 4 个 值 ， 那 么 它们 分 别 代表 顶 边 、 右 边 、 底 边 和 左边 的 内 边 距 。 如 果 省 略 一 个 
值 ， 则 最 佳 搭配 方案 如 下 : 省 略 左边 的 值 ， 默 认 使 用 右边 的 值 ; 省 略 底 边 的 值 ， 默 认 使 用 顶 边 的 
值 。 如 果 只 给 一 个 值 ， 则 四 条 边 的 内 边 距 都 是 这 个 值 。 

代码 清单 20-2 展 示 了 如 何 使 用 padding 简 写 属 性 。 这 个 示例 中 还 添加 了 圆 角 边 框 , 告诉 你 如 何 
使 用 padding 以 确保 边框 不 会 在 元 素 内 容 之 上 。 


代码 清单 20-2 使 用 padding 简 写 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 
border: 10px solid black; 
background: lightgray; 
border-radius: 1em 4em 1em 4em; 
padding: 5px 25px 5px 40px; 



































} 

</style> 

</head> 

<body> 

<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 

</body> 

</html> 
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图 20-2 显 示 了 浏览 器 如 何 显示 代码 中 指定 的 圆 角 边框 和 内 边 
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There are lots of different kinds of fruit - there are over | 
500 varieties of banana alone. By the time we add the 
countless types of apples, oranges, and other well-known 


fruit, we are faced with thousands of choices. 





























图 20-2 ”使 用 padding 简 写 属 性 
如 果 不 设置 内 边 距 , 边框 就 会 绘制 在 文本 上 , 第 19 章 的 图 就 是 这 个 效果 。 设置 内 边 距 就 能 确 
保 内 容 和 边框 之 间 留 出 足够 的 空间 ， 不 会 出 现 这 种 情况 。 
20.0 ”为 元 素 应 用 外 边 距 


外 边 距 是 元 素 边框 和 页 面 上 围绕 在 它 周 围 的 所 有 东西 之 间 的 空白 区 域 。 围绕 在 它 周 围 的 东西 
包括 其 他 元 素 和 它 的 父 元 素 。 表 20-3 总 结 了 控制 外 边 距 的 属性 。 


#20-3 ”外 边 距 属性 





























属 性 说 OR 值 

margin-top 为 项 边 设 置 外 边 距 长 度 值 或 者 百分数 

margin-right 为 右边 设置 外 边 距 长 度 值 或 百分数 
"HELL 为 底 边 设置 外 边 距 长 度 值 或 百分数 

margin-left 为 左边 设置 外 边 距 长 度 值 或 百分数 

margin 简写 属性 ， 在 一 条 声明 中 设置 所 有 边 的 外 边 距 1 ~ 4 个 长 度 值 或 百分数 



































跟 内 边 距 属 性 相似 ， Eel a Wi E 
代码 清单 20-3 展 示 了 如 何 为 元 素 添加 外 边 


代码 清单 20-3 ”为 元 素 添 加 外 边 距 


<!DOCTYPE HTML> 
«html» 
«head» 

«title»Example«/title» 
«meta name-"author" content-"Adam Freeman"/» 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
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img { 
border: 4px solid black; 
background: lightgray; 
padding: 4px; 
margin: 4px 20px; 


</style> 
</head> 
<body> 
<img src-"banana-small.png" alt-"small banana"> 
<img src-"banana-small.png" alt-"small banana"> 
</body> 
</html> 


在 代码 清单 20-3 中 ， 我 们 使 用 了 两 个 img 元 素 。 我 为 顶 边 和 底 边 应 用 了 4 像素 的 外 边 距 ， 为 左 
边 和 右边 应 用 了 20 像 素 的 外 边 距 。 你 可 以 从 图 20-3 看 到 外 边 距 围绕 元 素 制 造 的 空白 区 域 ， 两 个 图 
分 别 显示 的 是 设置 外 边 距 前 后 的 img 元 素 。 


r 













E Example 






€ > C Ofitan/istings/examy B eempe SAI _ 
€ > C © titan stings/example.html w X 


zz 


图 20-3 ”为 元 素 应 用 外 边 距 的 效果 


外 边 距 有 时 候 不 显示 ， 即 使 你 设置 了 某 个 外 边 距 属性 的 值 。 例 如 ， 为 dispaly 属 性 的 值 设置 
为 inline 的 元 素 应 用 外 边 距 的 时 候 ， 顶 边 和 底 边 的 外 边 距 就 不 会 显示 。 本 章 后 面 的 20.6 节 会 详细 
介绍 display 属 性 。 


20.3 ”控制 元 素 的 尺寸 


浏览 器 会 基于 页 面 上 内 容 的 流 设置 元 素 的 尺寸 。 有 几 条 比较 恐怖 的 详细 规则 是 浏览 器 在 分 配 
尺寸 的 时 候 必须 遵循 的 。 使 用 尺寸 相关 的 属性 可 以 覆盖 这 些 行 为 ， 表 20-4 总 结 了 相关 属性 。 


#20-4 尺寸 属性 






















































































属 性 说 明 值 
设置 元 素 的 宽度 和 高 度 auto、 长 度 值 或 者 百分数 
eig 
min-width 为 元 素 设置 最 小 可 接受 宽度 和 高 度 auto、 长 度 值 或 百分数 
min-height 
max-width 为 元 素 设 置 最 大 可 接受 宽度 和 高 度 auto、 长 度 值 或 百分数 
max-height 
box-sizing 设置 尺寸 调整 应 用 到 元 素 盒子 的 哪 一 部 分 ^ content-box, padding-box, border-box, margin-box 
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前 三 个 属性 的 默认 值 都 是 auto， 意 思 是 浏览 需 会 为 我 们 设置 好 元 素 的 宽度 和 高 度 。 你 也 可 以 
使 用 长 度 值 和 百分数 值 显 式 指定 尺寸 。 百 分 数值 是 根据 包含 块 的 宽度 来 计算 的 ( 处理 元 素 的 高 度 
也 是 根据 这 个 宽度 来 )。 代 码 清单 20-4 展 示 了 如 何 为 元 素 设置 尺寸 。 


代码 清单 20-4 ”为 元 素 设 置 尺寸 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
<style type="text/css"> 
div { 
width: 75%; 
height: 100px; 
border: thin solid black; 
































} 

img { 
background: lightgray; 
border: 4px solid black; 
margin: 2px; 
height: 50%; 


} 
itfirst { 
box-sizing: border-box; 
width: 50%; 
} 
#second { 
box-sizing: content-box; 
} 


</style> 
</head> 
<body> 
<div> 
<img id="first" src-"banana-small.png" alt-"small banana"> 
<img id-"second" src-"banana-small.png" alt-"small banana"> 
«/div» 
«/body» 
«/html» 


上 述 示例 代码 中 有 三 个 关键 元 素 ， 一 个 div 元 素 包 含 了 两 个 img 元 素 。 图 20-4 展 示 了 浏览 器 如 
何 显示 这 些 元 素 。 

div 元 素 是 body 元 素 的 子 元 素 。 当 我 将 div 元 素 的 宽度 表示 为 75% 的 时 候 ， 我 的 意思 是 告诉 浏 
览 需 将 div 的 宽度 设置 为 包含 块 ( 此 处 就 是 pody 内 容 盒 ) 宽度 的 75%,， 而 不 论 其 具体 值 是 多 少 。 如 
果 用 户 调整 了 浏览 器 窗口 ，body 元 素 也 会 相应 被 调整 ， 以 确保 div 元 素 的 宽度 总 是 body 内 容 盒 宽 
度 的 75%。 调整 浏览 器 窗口 前 后 的 效果 如 图 20-5 所 示 。 我 为 div 元 素 添加 了 一 个 边框 ,这 样 就 能 
清楚 它 的 尺寸 了 。 
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图 20-4 ”设置 元 素 的 尺寸 
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i T: a| 
图 20-5 ”调整 浏览 器 窗口 ， 演 示 相 关 尺 寸 关 系 
可 以 看 到 div 总 是 body 元 素 宽度 的 75%， 而 body 元 素 填 充 了 整个 浏览 器 窗口 。 我 将 div 元 素 的 








高 度 指定 为 100px， 这 是 个 绝对 值 ， 不 会 因为 包含 块 调整 而 改变 。 你 可 以 看 看 我 将 浏览 器 窗口 横 
向 拉 长 和 缩短 时 ，div 元 素 的 一 部 分 是 如 何 隐藏 的 。 

代码 中 对 img 元 素 也 进行 了 相似 的 设置 。 第 一 个 img 元 素 的 宽度 值 表示 为 包含 块 宽度 的 50%， 
即 图 像 总 是 调整 为 div 元 素 宽度 的 50%， 不 管 图 像 的 高 宽 比 是 否 被 保留 。 我 没有 设置 第 二 个 img 元 
素 的 宽度 值 ， 浏览 器 会 自行 解决 这 个 问题 。 默 认 情 况 下 ， 宽 度 值 会 根据 高 度 值 调整 ， 因 此 会 保留 
图 像 原先 的 高 宽 比 。 


























注意 图 20-$ 中 的 图 像 是 如 何 超出 div 元 素 边 界 的 ， 这 被 称 为 溢出 。 本 章 后 面 会 介绍 如 何 控 


制 溢出 。 


提示 


20.3.1 设置 一 定 尺 寸 的 盒子 


上 一 节 示 例 中 两 个 img 元 素 设 置 了 相同 的 高 度 值 (50% )， 但 两 个 图 片 的 高 度 在 屏幕 上 看 起 来 
不 一 样 。 这 是 因为 我 使 用 box-sizing 属 性 改变 了 其 中 一 个 元 素 应 用 尺寸 属性 的 区 域 。 
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默认 情况 下 ， 宽度 和 高 度 是 需要 计算 的 , 之 后 才能 应 用 到 元 素 的 内 容 盒 。 这 里 说 的 是 如 果 你 
设置 了 元 素 的 高 度 属性 是 100px, 那么 屏幕 上 的 真实 高 度 就 是 100px, 这 也 算 上 了 顶 边 和 底 边 的 内 
边 距 、 边 框 和 外 边 距 的 值 。box-sizing 属 性 允许 你 指定 尺寸 样式 应 用 到 元 素 盒子 的 具体 区 域 ， 也 
就 是 说 你 不 需要 自己 计算 某 些 值 了 。 表 20-4 列 出 了 box-sizing 属 性 的 取 值 。 


























提示 “尺寸 属性 的 常见 用 法 是 创建 网 格 布局 ， 它 确实 有 这 个 功能 ， 不 过 更 常见 的 做 法 是 使 用 表 
格 布局 特性 ， 关 于 表格 布局 的 详细 内 容 ， 我 们 会 在 第 21 章 介绍 。 


20.3.2 ”设置 最 小 和 最 大 尺寸 


可 以 使 用 最 小 和 最 大 相关 属性 为 浏览 器 调整 元 素 太 寸 设置 一 定 的 限制 。 这 让 浏览 器 对 于 如 何 
应 用 尺寸 调整 属性 有 了 一 定 的 自主 权 。 代 码 清 单 20-5 给 出 了 一 个 例子 。 


代码 清单 20-5 设置 尺寸 的 最 小 和 最 大 范围 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
img { 
background: lightgray; 
border: 4px solid black; 
margin: 2px; 
box-sizing: border-box; 
min-width: 100px; 
width: 50%; 
max-width: 200px; 





























</style> 
</head> 
<body> 
<img src="banana-small.png" alt="small banana"> 
</body> 
</html> 


在 代码 清单 20-5 中 ， 我 为 一 个 img 元 素 应 用 了 min-width 和 max-width 属 性 ， 并 将 其 初始 宽度 设 
置 为 包含 块 的 50%。 这 样 浏览 器 就 有 了 一 定 的 灵活 性 来 调整 图 像 尺 寸 , 使 其 在 代码 中 定义 的 最 大 
尺寸 和 最 小 尺寸 范围 内 保持 50% 的 关系 。 浏 览 絮 会 利用 这 种 灵活 性 保留 图 像 的 高 宽 比 ， 如 图 20-6 
所 示 。 
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图 20-6 ”使 用 min-width 和 max-width 属 性 为 元 素 大 小 设置 范围 
图 20-6 展 示 的 是 在 我 不 断 缩小 浏览 器 窗口 的 情况 下 ， 图 像 的 调整 情况 。 随 着 窗口 不 断 变 小 ， 
浏览 器 同时 会 调整 图 像 的 大 小 ， 维 持 img 元 素 和 body 元 素 之 间 的 百分数 关系 。 如 果 图 像 达到 最 小 
宽度 ,浏览 器 就 无 法 再 调整 图 像 的 尺寸 了 。 从 这 一 系列 图 片 的 最 后 一 帧 可 以 看 出 ， 图 像 不 能 
小 ， 图 像 的 一 部 分 被 浏览 器 窗口 的 底部 裁剪 掉 了 。 






































注意 浏览 器 对 box-sizing 属 性 的 支持 情况 各 不 相同 。 


20.4 ANB BAR 


如 果 你 尝试 改变 元 素 的 尺寸 , 很 快 就 会 到 达 某 一 个 点 : 内 容 太 大 , 已 经 无 法 完全 显示 在 元 素 
的 内 容 盒 中 。 这 时 的 默认 处 理 方式 是 内 容 溢出 ， 并 继续 显示 。 代 码 清单 20-6 创 建 了 一 个 固定 尺寸 
的 元 素 ， 由 于 尺寸 太 小 ， 无 法 显示 其 中 的 内 容 。 


代码 清单 20-6 ”创建 一 个 无 法 完全 显示 其 中 内 容 的 小 尺寸 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 
width: 200px; 
height: 100px; 
border: medium double black; 

















} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
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and other well-known fruit, we are faced with thousands of choices. 











</p> 
</body> 
</html> 
代码 中 为 p 元 素 的 width 和 height 属 性 指定 了 绝对 值 , 最 终 在 浏览 器 中 的 显示 效果 如 图 20-7 所 示 。 
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varieties of banana alone. By the 
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of apples, oranges, and other 
well-known fruit, we are faced 
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图 20-7 元素 尺寸 太 小 ， 无 法 显示 其 中 内 容 时 的 默认 外 观 
我 们 可 以 使 用 overflow 属 性 改变 这 种 行为 ， 表 20-5 列 出 了 相关 的 overflow 属 性 及 值 。 


3k20-5 overflow 属性 
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E 性 说 — Hj {a 
overflow-x 设置 水 平方 向 和 垂直 方向 的 溢出 方式 参见 表 20-6 
overflow-y 
overflow 简写 属性 overflow 





overflow-x overflow-y 











overflow-x 和 overflow-y 属 性 分 别 设置 水 平方 向 和 垂直 方向 的 溢出 方式 ，overflow 简 写 属性 
可 在 一 条 声明 中 声明 两 个 方向 的 流出 方式 。 表 20-6 展 示 了 这 三 个 属性 可 能 的 取 值 。 


表 20-6 ”溢出 属性 的 值 
































值 说 AB 
auto 浏览 器 自行 处 理 溢出 内 容 。 通 常 ， 如 果 内 容 被 剪 掉 就 显示 滚动 条 ， 否 则 就 不 显示 ( 这 是 相 较 scroll 值 来 











说 的 , 设置 该 值 后 ,无 论 内 容 是 否 溢 出 都 有 滚动 条 ) 

hidden 多 余 的 部 分 直接 剪 掉 ， 只 显示 内 容 盒 里 面 的 内 容 。 如 果 用 户 想 看 看 剪 掉 的 这 部 分 内 容 ， 对 不 起 ， 做 不 到 
no-content ”如 果 内 容 无 法 全 部 显示 ， 就 直接 移 除 。 主 流 浏览 器 都 不 支持 这 个 值 

no-display 如果 内 容 无 法 全 部 显示 ， 就 隐藏 所 有 内 容 。 主 流 浏览 器 都 不 支持 这 个 值 


scroll 为 了 让 用 户 看 到 所 有 内 容 ， 浏 览 器 会 添加 滚动 机 制 。 通 常 是 滚动 条 ， 不 过 这 个 值 跟 具 体 的 平台 和 浏览 攻 
相关 。 即 使 内 容 没有 溢出 也 能 看 到 滚动 条 


visible 。 默认 值 ， 不 管 是 否 溢出 内 容 愈 ， 都 显示 元 素 内 容 
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代码 清单 20-7 展 示 了 溢出 属性 的 用 法 。 





代码 清单 20-7 ”控制 内 容 溢出 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 
width: 200px; 
height: 100px; 
border: medium double black; 
} 
#first (overflow: hidden; } 
#second { overflow: scroll; } 
</style> 
</head> 
<body> 
<p id="first"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<p id="second"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


在 代码 清单 20-7 中 ， 我 们 为 id 为 first 段 落 的 overflow 属 性 使 用 了 hidden 值 ， 为 id 为 second 段 
落 的 overflow 属 性 使 用 了 scroll 值 ， 两 者 的 呈现 效果 如 图 20-8 所 示 。 











提示 “这 部 分 是 CSS 模 块 还 没有 解决 的 一 块 。 已 经 有 了 扩展 溢出 相关 属性 从 而 支持 滚动 字幕 ( 其 
中 的 元 素 内 容 会 持续 在 显示 器 中 显示 ， 因 此 经 过 一 段 时 间 所 有 内 容 都 会 可 见 ) 的 提案 。 
下 面 的 属性 是 CSS3 定 义 的 ， 不 过 主流 浏览 器 都 还 没有 实现 : overflow-style, 
marquee-direction, marquee-loop, marquee-play-count, marquee-speedfemarquee-style, 


20.5 ”控制 元 素 的 可 见 性 417 








lY Example 
[A] 


€ 3 C [O ttan/listings/examplehtml Y| 入 


here are lots of different kinds 
of fruit - there are over 500 
varieties of banana alone. By the 
time we add the countless types 
of apples, oranges, and other 


m 


ere are lots of different 
inds of fruit - there are over 
500 varieties of banana alone. - 
IBy the time we add the 























图 20-8 ”为 overflow 属 性 使 用 hidden 和 scrol1 值 


20.5 ”控制 元 素 的 可 见 性 


我 们 可 以 使 用 visibility 属 性 控制 元 素 的 可 见 性 ， 表 20-7 简 单 描述 了 这 个 属性 。 虽 然 这 种 做 
法 有 点 奇怪 ， 不 过 这 个 属性 跟 JavaScript 一 起 使 用 能 创建 一 些 比较 复杂 的 效果 。 
































420-7 visibility 属性 








属 性 it 明 值 
visibility 设置 元 素 的 可 见 性 collapse 
hidden 
visible 


表 20-8 给 出 了 visibility 属 性 取 值 的 简单 情况 。 
表 20-8 visibility 属 性 的 值 
























































值 说 RH 
collapse 元 素 不 可 见 ， 且 在 页 面 布 局 中 不 占据 空间 
hidden 元 素 不 可 见 ， 但 在 页 面 布局 中 占据 空间 
visible 默认 值 ， 元 素 在 页 面 上 可 见 











代码 清单 20-8 展 示 了 如 何 使 用 JavaScript 和 几 个 按钮 元 素 (已 在 第 12 章 做 过 介绍 ) 改变 元 素 的 
可 见 性 。 


代码 清单 20-8 使 用 visibility 属 


<!DOCTYPE HTML> 


<html> 
<head> 


[s 
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<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content="A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
tr » th ( text-align:left; background:gray; color:white] 
tr > th:only-of-type {text-align:right; background: lightgray; color:gray} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th> 
</tr> 
<tr id="firstchoice"> 
<th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td> 
</tr> 
<tr> 
«th»2nd Favorite:«/th»«td»Oranges«/td»«td»Orange«/td»«td»Large«/td» 
</tr> 
</table> 
<p> 
<button>Visible</button> 
<button>Collapse</button> 
<button>Hidden</button> 
</p> 
<script> 
var buttons = document.getElementsByTagName("BUTTON") ; 
for (var i = 0; i « buttons.length; i++) ( 
buttons[i].onclick - function(e) ( 
document.getElementById("firstchoice").style.visibility - 
e.target.innerHTML; 





h 
) 


</script> 
</body> 
</html> 


本 例 中 的 脚本 找 出 id 值 为 firstchoice 的 元 素 ， 并 基于 操作 中 被 按 下 的 putton 元 素来 设置 
visibility 属 性 的 值 。 通 过 这 种 方式 ， 你 就 可 以 在 visible、hidden 和 collapse 值 之 间 切 换 。 这 三 
个 值 的 效果 显示 在 图 20-9 中 。 
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图 20-9 ”visibility 属 性 的 三 个 值 的 呈现 效果 
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collapse 值 只 能 应 用 到 表 相 关 元 素 ， 如 tr 和 td， 要 想 了 解 关 于 这 些 元 素 的 详细 内 容 ， 可 参阅 
LRE HEA EA, "Chrome, 根本 不 支持 collapse 值 ( 这 也 是 我 使 用 Firefox 生 成 图 20-9 的 原因 )。 


提示 “对 于 非 表格 元 素 或 者 不 支持 这 个 特性 的 元 素 ， 为 display 属 性 应 用 none 值 可 以 达到 相同 的 
效果 。 下 一 节 就 会 讲 到 display 属 性 。 


20.6 设置 元 素 的 盒 类 型 


display 属 性 提供 了 一 种 改变 元 素 盒 类 型 的 方式 ， 这 相应 会 改变 元 素 在 页 面 上 的 布局 方式 。 
在 本 书 第 二 部 分 ， 你 会 注意 到 许多 元 素 的 样式 约定 中 都 包括 display 属 性 指定 某 个 值 。 有 些 元 素 
使 用 默认 值 inline， 不 过 也 有 些 会 指定 其 他 值 。 表 20-9 列 出 了 display 属 性 允许 的 取 值 。 


表 20-9 display 属 性 的 值 
























































有 
inline 盒子 显示 为 文本 行 中 的 字 
block 盒子 显示 为 段落 
inline-block 盒子 显示 为 文本 行 
list-item 盒子 显示 为 列表 项 ， 通 常 具 有 项 目 符号 或 者 其 他 标记 符 ( 如 索引 号 ) 
run-in 盒子 类 型 取决 于 周 于 的 元 素 ， 参 见 代 码 清单 20-12 20-13 
compact 盒子 的 类 型 为 块 或 者 标记 盒 〈 跟 list-item 类 型 产生 的 类 似 ) 。 本 书 撰写 时 主流 浏览 器 都 
不 支持 这 个 值 
Flexbox 这 个 值 跟 弹性 盒 布 局 相关 ， 会 在 第 21 章 介 
table 这 些 值 跟 表格 中 的 元 素 布局 相关 ， "rh 见 第 21 章 


inline-table 

table-row-group 

table-header-group 

table-footer-group 

table-row 

table-column-group 

table-column 

table-cell 

table-caption 

ruby 这 些 值 跟 带 ruby 注 释 的 文本 布局 相关 


ruby-base 




















ruby-text 
ruby-base-group 
ruby-text-group 


none 元 素 不 可 见 ， 且 在 页 面 布局 中 不 占 空间 





























一 


些 值 让 人 很 困惑 ， 而 它们 对 页 面 布局 影响 次 远 。 下 面 会 逐 节 介绍 每 种 盒 类 型 。 
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20.6.1 认识 块 级 元 素 
将 display 属 性 设置 为 block 值 会 创建 一 个 块 级 元 素 。 块 级 元 素 会 在 垂直 方向 跟 周围 元 素 有 所 




















区 别 。 通 常 在 元 素 前 后 放置 换行 符 也 能 达到 这 种 效果 ， 在 元 素 和 周围 元 素 之 间 制 造 分 割 的 感觉 ， 
就 像 文 本 中 的 段落 。p 元 素 表示 段落 , 其 默认 样式 约定 中 就 包括 display 属 性 取 block 值 。 不 过 block 


值 可 应 月 


























日 到 所 有 元 素 ， 其 用 法 如 代码 清单 20-9 所 示 。 


代码 清单 20-9 将 display 属 性 设置 为 block 值 


<!DOCTYPE HTML> 
<html> 





<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
p (border: medium solid black) 
span { 
display: block; 
border: medium double black; 
margin: 2px; 


«/style» 
«/head» 
«body» 
«p» 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<p> 
One of the most interesting aspects of fruit is the variety available in 
each country. <span>I live near London</span>, in an area which is known for 
its apples. When travelling in Asia, I was struck by how many different 
kinds of banana were available - many of which had unique flavours and 
which were only avaiable within a small region. 
</p> 








</body> 
</html> 


通过 两 类 元 素 我 们 可 以 看 到 块 级 元 素 在 页 面 上 的 布局 效果 。 第 一 个 是 p 元 素 , 我 前 面 提 到 过 ， 





它 的 默认 样式 约定 中 就 为 display 属 性 使 用 了 block 值 (要 想 了 解 p 元 素 的 更 多 内 容 ， 请 参阅 第 9 




















章 )。 当 然 ， 我 也 希望 跟 你 解释 清楚 display 属 性 的 block 值 可 以 应 用 到 任意 元 素 ， 因 此 代码 中 为 


span 元 素 





图 20-10 所 示 。 

















显 式 设置 了 display 属 性 为 block 值 , 设置 代码 写 在 了 style 元 素 中 。 元 素 盒 的 实际 效果 如 














Pp 元素 的 一 般 显示 效果 你 以 前 都 见 过 ， 这 个 例子 中 ,我 为 p 元 素 添 加 了 边框 ,目的 是 让 垂直 方 


向 上 的 分 割 更 为 明显 。 注 意 一 下 应 用 了 blcok 值 的 span 元 素 : 在 包含 p 元 素 的 盒子 中 ， 在 视觉 效果 




















上 跟 周 围 








元 素 明显 不 同 。 
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arm 
! a sample x E 
€ > C |Q titan/listings/example.htm! wf 


here are lots of different kinds of fruit - there are over 500 varieties of banana 
alone. By the time we add the countless types of apples. oranges. and other well- 
known fruit, we are faced with thousands of choices. 


One of the most interesting aspects of fruit is the variety available in each country. 


|. in an area which is known for its apples. When travelling in Asia. I was struck by 
how many different kinds of banana were available - many of which had unique 
flavours and which were only avaiable within a small region. 























图 20-10 “将 元 素 display 属 性 的 值 设 为 block 








20.6.2 ”认识 行内 元 素 





将 display 属 性 设置 为 inline 值 会 创建 一 个 行内 元 素 ， 它 在 视觉 上 跟 周围 内 容 的 显示 没有 区 





别 。 代 码 清 单 20-10 展 示 了 如 何 应 用 这 个 值 ， 它 也 可 以 用 到 p 这 种 默认 块 级 元 素 上 。 
代码 清单 20-10 ”将 display 属 性 设置 为 inline 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style type-"text/css"» 
p t 


display: inline; 


span { 
display: inline; 
border: medium double black; 
margin: 2em; 
width: 10em; 
height: 2em; 
j 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 


and other well-known fruit, we are faced with thousands of choices. 
</p> 
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<p> 
One of the most interesting aspects of fruit is the variety available in 
each country. <span>I live near London</span>, in an area which is known for 
its apples. When travelling in Asia, I was struck by how many different 
kinds of banana were available - many of which had unique flavours and 
which were only avaiable within a small region. 

</p> 
</body> 
</html> 


在 上 述 代码 中 ， 我 为 p 元 素 和 span 元 素 同时 使 用 了 inline 值 ， 从 图 20-11 可 以 看 出 应 用 样式 后 
的 效果 : p 元 素 和 span 元 素 中 的 文本 跟 剩 余 文 本 没有 分 开 ， 都 显示 在 一 起 。 











[ Les] E 
/ Wbemple 
€ > QC Ortitan/listings/example.htm! T A 


There are lots of different kinds of fruit - there are over 500 varieties of banana 
alone. By the time we add the countless types of apples, oranges, and other well- 
known fruit, we are faced with thousands of choices. One of the most interesting 
aspects of fruit is the variety available in each country. [Liive near London]. in an 

| area which is known for its apples. When travelling in Asia, I was struck by how 
many different kinds of banana were available - many of which had unique flavours 
and which were only avaiable within a small region. 














图 20-11 ”将 元 素 的 display 属 性 设置 为 inline 值 








使 用 inline 值 的 时 候 , 浏览 器 会 忽略 某 些 属性 ， 如 width、height 和 margin。 上 面 的 示例 代码 
中 ， 我 为 span 元 素 定义 了 这 三 个 属性 的 值 ， 但 没有 一 个 应 用 到 页 面 布局 中 。 


20.6.3 ”认识 行内 - 块 级 元 素 


将 display 属 性 设置 为 inline-block 值 会 创建 一 个 其 盒子 混合 了 块 和 行内 特征 的 元 素 。 盒 子 
体 上 作为 行内 元 素 显 示 ,， 这 意味 着 垂直 方向 上 该 元 素 和 周围 的 内 容 并 排 显 示 ,， 没 有 区 别 。 但 盒 
内 部 作为 块 元 素 显示 ， 这 样 ，width、height 和 margin 属 性 都 能 应 用 到 盒子 上 。 代 码 清单 20-11 展 
示 了 该 值 的 用 法 。 


代码 清单 20-11 使 用 inline-block 值 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 


display: inline; 
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</st 
</head> 
<body> 

<p> 


</p> 
<p> 


</p> 
</body> 
</html> 


} 

span { 
display: inline-block; 
border: medium double black; 
margin: 2em; 
width: 10em; 
height: 2em; 

} 

yle> 


There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 


and other well-known fruit, we are faced with thousands of choices. 


One of the most interesting aspects of fruit is the variety available in 
each country. <span>I live near London</span>, in an area which is known for 
its apples. When travelling in Asia, I was struck by how many different 
kinds of banana were available - many of which had unique flavours and 





which were only avaiable within a small region. 





应 用 了 新 值 一 一 





代码 清单 20-11 跟 代码 清单 20-10 的 唯一 区 别 是 : 为 span 元 素 的 display 属 诉 
inline-block， 但 视觉 变化 非常 明显 ， 因 为 之 前 应 用 inline 值 的 时 候 被 忽略 的 三 个 属性 现在 都 可 
以 体现 到 样式 中 了 。 上 述 代 码 的 呈现 效果 如 图 20-12 所 示 。 


20.6.4 认识 

















Example 


| There are lots of different kinds of fruit - there are over 500 varieties of banana alone. 
By the time we add the countless types of apples, oranges, and other well-known 
fruit, we are faced with thousands of choices. One of the most interesting aspects of 


fruit is the variety available in each country. 
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\ - 2 = 
€ > C O titan/listings/example.htm! wf 





[ ET 
































图 20-12 ”为 display 属 性 应 用 inline-block 值 





插入 元 素 











display 属 性 设置 为 run-in 值 会 创建 一 个 这 样 的 元 素 : 其 盒子 类 型 取决 于 周围 元 素 。 通常 , 浏 
览 需 必 须 评估 以 下 三 种 情况 ， 以 确定 插入 框 的 特性 。 
(1) 如 果 插 入 元 素 包 含 一 个 display 属 性 值 为 block 的 元 素 ， 那 么 插入 元 素 就 是 块 级 元 素 。 
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(2) 如 果 择 入 元 素 的 相 邻 兄弟 元 素 是 块 级 元 素 ， 那 么 插入 元 素 就 是 兄弟 元 素 中 的 第 一 个 行内 
元 素 。 我 会 在 代码 清单 20-12 中 演示 这 种 情况 。 

(3) 其 他 情况 下 ， 插 入 元 素 均 作为 块 级 元 素 对 待 。 

在 这 三 种 情况 中 ， 第 二 种 情况 需要 稍微 解释 一 下 。 代 码 清单 那 20-12 展 示 了 一 个 相 邻 兄弟 元 
素 为 块 级 元 素 的 搬入 元 素 。 


代码 清单 20-12 ” 相 邻 兄弟 元 素 为 块 级 元 素 的 插入 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
pt 
display: block; 


span { 
display: run-in; 
border: medium double black; 
} 
</style> 
</head> 
<body> 
<span> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. 
</span> 
<p> 
By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


从 图 20-13 可 以 看 到 插入 元 素 是 怎样 作为 块 元 素 的 一 部 分 来 处 理 的 ( 不 过 ， 需 要 注意 的 是 : 
并 不 是 所 有 浏览 器 都 能 正确 地 支持 这 个 属性 )。 
r E x x 
国 Example a k 
€ > Œ Q titan/listings/example.htm 3 


There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time 


we add the countless types of apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. | 
































图 20-13 ”具有 块 级 相 邻 兄 弟 元 素 的 插 人 元素 
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如 果 相 邻 兄 弟 元 素 不 是 块 级 元 素 ， 那么 插入 元 素 作为 块 级 元 素 处 理 。 代 码 清单 20-13 是 这 方 
面 的 一 个 例子 。 


代码 清单 20-13 ” 相 邻 兄弟 元 素 为 行内 元 素 的 插入 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content="A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style type-"text/css"» 
p { 


display: inline; 
} 


span { 
display: run-in; 
border: medium double black; 
} 
</style> 
</head> 
<body> 
<span> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. 
</span> 
<p> 
By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


在 这 个 例子 中 ， 插 入 元 素 显示 为 块 级 元 素 ， 如 图 20-14 所 示 。 





f cjl 
/ y Example Y d 
€ 3 C QOtitan/listings/example.html wy A 


here are lots of different kinds of fruit - there are over 500 varieties of banana alone. 


By the time we add the countless types of apples, oranges. and other well-known fruit, we 
are faced with thousands of choices. 























120-14 ”搬入 元 素 显 示 为 块 级 元 素 
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20.6.5 ”隐藏 元 素 


将 display 属 性 设置 为 none 值 就 是 告诉 浏览 器 不 要 为 元 素 创建 任何 类 型 的 盒子 ， 也 就 是 说 元 
素 没有 后 代 元 素 。 这 时 元 素 在 页 面 布 局 中 不 占据 任何 空间 。 代 码 清单 20-14 展 示 了 一 个 带 有 简单 
脚本 的 HTML 文 档 ， 这 个 脚本 可 以 将 p 元 素 的 和 isplay 属 性 在 block 和 none 之 间 切 换 。 


代码 清单 20-14 将 display 属 性 设置 为 none 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
«meta name-"author" content-"Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«p id="toggle"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 



































</p> 

<p> 
One of the most interesting aspects of fruit is the variety available in 
each country. <span>I live near London</span>, in an area which is known for 
its apples. When travelling in Asia, I was struck by how many different 
kinds of banana were available - many of which had unique flavours and 
which were only avaiable within a small region. 

</p> 

<p> 








<button>Block</button> 
<button>None</button> 
</p> 


<script> 
var buttons = document.getElementsByTagName("BUTTON") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
document .gettlementById("toggle").style.display- 
e.target.innerHTML; 
B 
} 
</script> 
</body> 
</html> 


可 以 从 图 20-15 中 看 到 none 值 是 如 何 导 致 元 素 从 页 面 布局 中 移 除 的 。 
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图 20-15 将 display 属 性 设置 为 none 值 的 效果 
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可 以 使 用 float 属 性 创建 浮动 盒 ， 浮 动 盒 会 将 元 素 的 左边 界 或 者 右边 界 移动 到 包含 块 或 另 一 
个 浮动 盒 的 边界 。 表 20-10 总 结 了 这 个 属性 。 


表 20-10 float 属性 














属 tt OBA 值 
float 设置 元 素 的 浮动 样式 iot 
none 





表 20-11 描 述 了 float 属 性 的 值 。 
表 20-11 li0at 属 性 的 值 

















值 说 明 
left 移动 元 素 ， 使 其 左边 界 挨 着 包含 块 的 左边 界 ， 或 者 另 一 个 浮动 元 素 的 右边 界 
right 移动 元 素 ， 使 其 右边 界 挨 着 包含 块 的 右边 界 ， 或 者 另 一 个 浮动 元 素 的 左边 界 
none 元 素 位 置 固定 


代码 清单 20-15 展 示 了 float 属 性 的 用 法 。 
代码 清单 20-15 ”使 用 float 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
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<style> 
p.toggle { 
float:left; 
border: medium double black; 
width: 40%; 
margin: 2px; 
padding: 2px; 
} 
</style> 
</head> 
<body> 
<p class="toggle"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<p class="toggle"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 
</p> 
<p> 
When travelling in Asia, I was struck by how many different 
kinds of banana were available - many of which had unique flavours and 
which were only available within a small region. 
</p> 
<p> 
<button>Left</button> 
<button>Right</button> 
<button>None</button> 
</p> 
<script> 
var buttons = document.getElementsByTagName("BUTTON") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
var elements = document.getElementsByClassName("toggle"); 
for (var j = 0; j < elements.length; j++) { 
elements[j].style.cssFloat = e.target.innerHTML; 
} 


h 
} 
</script> 
</body> 
</html> 


上 面 的 代码 示例 中 定义 了 四 个 p 元 素 ， 其 中 前 两 个 元 素 的 float 属 性 设置 为 了 left。 这 意味 着 这 
n Ru 或 者 另 一 个 浮动 元 素 的 右边 界 。 因 为 要 移动 两 个 元 素 , 第 一 
会 被 移动 到 包含 块 的 左边 界 , 而 第 二 个 会 紧 靠 第 一 个 ,它们 在 浏览 器 中 的 呈现 效果 如 图 20-16 所 示 。 














提示 “注意 在 JavaScript 中 提 到 float 属 性 必须 使 用 cssFloat。 学 习 第 29 章 的 时 候 ， 你 会 习惯 使 用 
JavaScript 为 元 素 应 用 样式 。 
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available - many of which had unique 
flavours and which were only avaiable 






choices. 


within a small region. 














图 20-16 ”使 用 float 属 性 的 left 值 


注意 元 素 内 容 的 剩余 部 分 流 式 环绕 在 浮动 元 素 周围 。 在 这 个 例子 中 ,我 还 添加 了 三 个 button 
元 素 , 以 及 一 个 简单 的 脚本 ( 基于 被 按 下 的 按钮 改变 两 个 p 元 素 的 float 值 ) 如 果 按 下 Right 按 钮 ， 
元 素 会 移动 到 包含 块 的 右边 界 ， 如 图 20-17 所 示 。 注 意 元素 呈 现 的 顺序 : 文档 中 定义 的 第 一 个 p 元 
素 会 在 最 右边 。 
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When One of the most interesting | |There are lots of different 
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many 
different kinds of banana were 
available - many of which had unique 
flavours and which were only avaiable 
within a small region. 

















图 20-17 ”使 用 float 属 性 的 right 值 
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最 后 一 个 按钮 None 通 过 将 人 0at 属 性 的 值 设置 为 none 来 禁用 浮动 效果 。 这 恢复 了 元 素 盒 的 默 








认 呈 现 效 果 。p 元 素 默 认为 块 级 元 素 ， 效 果 如 网 20-18 所 示 。 
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图 20-18 ”使 用 float 属 性 的 none 值 











阻止 浮动 元 素 堆 释 





如 果 设 置 了 多 个 浮动 元 素 ， 默 认 情 况 下 ， 它 们 会 一 个 挨 着 一 个 地 堆肥 在 一 起 。 使 用 clear 属 
性 可 以 指定 浮动 元 素 的 一 个 边界 或 者 两 个 边界 不 能 挨 着 另 一 








性 可 以 阻止 出 现 这 种 情况 。clear 属 
个 浮动 元 素 。 表 20-12 总 结 了 clear 属 性 。 








pany 


3k20-12 clear 属性 











属 性 BOA 值 
clear 设置 元 素 的 左边 界 、 右 边界 或 左右 两 个 边界 不 允许 出 现 浮动 元 素 
both 
none 








表 20-13 描 述 了 clear 属 性 的 值 。 
表 20-13 ”clear 属性 的 值 














值 说 明 
left 元 素 的 左边 界 不 能 挨 着 男 一 个 浮动 元 素 
right 元 素 的 右边 界 不 能 挨 着 男 一 个 浮动 元 素 
both 元 素 的 左右 边界 都 不 能 挨 着 浮动 元 素 


none 元 素 的 左右 边界 都 可 以 挨 着 浮动 元 素 
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代码 清单 20-16 展 示 了 clear 属 性 的 用 法 。 








代码 清单 20-16 ”使 用 clear 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
p.toggle { 
float:left; 
border: medium double black; 
width: 4096; 
margin: 2px; 
padding: 2px; 
} 


p.cleared { 
clear:left; 


} 


</style> 
</head> 
<body> 
<p class="toggle"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<p class="toggle cleared"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 
</p> 
<p> 
When travelling in Asia, I was struck by how many different 
kinds of banana were available - many of which had unique flavours and 
which were only avaiable within a small region. 
</p> 


<p> 
<button>Left</button> 
<button>Right</button> 
<button>None</button> 
</p> 
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使 用 金 模 型 





<script> 


var buttons = document.getElementsByTagName("BUTTON") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 


var elements = document.gettlementsByClassName("toggle"); 


for (var j = 0; j < elements.length; j++) { 
elements[j].style.cssFloat = e.target.innerHTML; 


} 
»h 
} 
</script> 
</body> 
</html> 








这 里 的 代码 示例 是 对 前 一 个 例子 的 简单 扩展 ， 只 是 添加 了 一 个 新 的 样式 ， 为 第 二 个 p 元 素 清 
除了 左边 界 的 浮动 元 素 。 从 图 20-19 可 以 看 出 这 个 设置 引起 了 页 面 布 局 的 改变 ( 现在 两 个 元 素 都 
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图 20-19 ”清除 浮动 元 素 的 左边 界 


第 二 个 p 元 素 的 左边 界 不 允许 挨 着 男 一 个 浮动 元 素 , 因此 浏览 器 将 这 个 元 素 移 到 了 页 面 下 方 。 
元 素 的 右边 界 没有 清除 ， 也 就 是 说 如 果 你 将 两 个 p 元 素 的 float 属 性 设置 为 right， 它 们 在 页 面 上 


还 是 会 挨 着 ， 如 图 20-20 所 示 。 
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图 20-20 ”没有 清除 右边 界 的 右边 浮动 元 素 





20.8 小 结 


本 章 学 习 了 如 何 进 行 元 素 盒 模 型 的 基本 配置 ， 从 而 改变 其 在 页 面 中 的 布局 。 我 们 一 开始 先 
学 习 了 基本 属性 ， 如 padding、margin， 之 后 探讨 了 更 复杂 的 概念 ， 如 宽度 和 高 度 的 范围 ， 溢 出 
内 容 。 

本 章 最 重要 的 概念 是 我 们 可 以 为 元 素 创建 的 不 同 盒 类 型 的 呈现 效果 。 理解 块 级 元 素 和 行内 元 
素 的 关系 对 于 掌握 HTMLS 布 局 至 关 重 要 ， 浮 动 元 素 和 清除 边界 在 创建 弹性 网 页 过 程 中 应 用 非常 
] 325 

下 一 章 ， 我 会 向 你 展示 一 些 CSS 支 持 的 更 复杂 的 创建 元 素 布局 的 模型 。 























创建 布局 

















本 章 为 你 介绍 控制 页 面 元 素 布局 的 不 同方 法 。 随 着 对 分 离 HTML 元素 的 语义 重要 性 与 其 表现 
的 影响 的 不 断 强 调 ，CSS 在 HTML5 元 素 布局 方面 的 作用 越 来 越 重要 。CSS3 中 有 一 些 非常 实用 的 
布局 特性 ， 当 然 ， 你 也 可 以 使 用 CSS 早 期 版 本 中 的 已 有 功能 。 

有 两 个 推荐 的 CSS3 布 局 模型 ， 有 竺 进一步 成 熟 ， 因 此 本 章 并 未 涉及 。 第 一 个 是 模板 布局 ， 
人 允许 我 们 创建 可 包含 元 素 的 弹性 布局 。 目 前 还 没有 浏览 器 实现 这 个 模块 ， 不 过 你 可 以 通过 一 个 
jQuery 插件 (http://a.deveria.com/?p=236 ) 对 这 个 功能 进行 实验 。 另 一 个 新 模块 可 以 为 布局 创建 弹 
生 网 格 。 不 过 ， 在 撰写 本 书 过 程 中 ， 这 个 规范 还 没完 成 ， 也 就 说 还 没有 实现 可 用 。 

CSS3 中 的 布局 这 一 整 块 内 容 仍然 不 太 稳定 。 本 章 肯定 会 讲 到 的 一 种 布局 样式 是 弹性 布局 盒 ， 
它 能 提供 非常 出 色 的 特性 。 但 是 标准 还 在 不 断 变化 中 , 它们 只 是 对 早期 工作 草案 阶段 标准 的 实现 ， 
因此 只 能 使 用 浏览 器 厂商 特定 属性 来 演示 这 种 布局 方法 。 

鉴于 这 些 新 特性 “过 于 超前 ”"， 我 建议 考虑 使 用 CSS 框 架 创 建 复杂 的 页 面 布局 。 个 人 推荐 使 
用 Blueprint ( 可 从 www.blueprintcss.org 下 载 )。 CSS 框 架 会 在 CSS3 布 局 特性 成 熟 后 为 你 提供 需要 的 
功能 。 表 21-1 是 本 章 内 容 的 一 个 总 结 。 


表 21-1 本章 内 容 概要 
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问 — 8 解决 方案 代码 清单 
改变 元 素 在 容器 块 中 的 定位 方式 使 用 position 属 性 21-1 
设置 定位 元 素 相对 于 容器 边界 的 偏 移 量 使 用 top、bottom 、left、right 属 性 21-1 
VECTOR WEAF 使 用 z-index 属 性 21-2 
创建 跟 报纸 页 面 类 似 的 布局 使 用 多 列 布局 21-3, 21-4 
将 空间 流 式 分 配 到 容器 中 的 元 素 使 用 弹性 盒 布 局 21-5 ~ 21-9 
为 元 素 创建 表格 样式 布局 使 用 CSS 表 布局 21-10 




















21.1 定位 内 容 


控制 内 容 最 简单 的 方式 就 是 通过 定位 ,这 允许 你 使 用 浏览 器 改变 元 素 的 布局 方式 。 表 21-2 描 
述 了 定位 属性 。 
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表 21-2 ”定位 属性 





E 性 说 明 值 
position 设置 定位 方法 参见 表 21-3 
lett 为 定位 元 素 设置 偏 移 量 < 长 度 > 
d 《百分数 > 
bottom auto 
ARUM iE TCR LE 数字 





21.1.1 设置 定位 类 型 
position 属 性 设置 了 元 素 的 定位 方法 。 这 个 属性 的 可 能 取 值 列 在 了 表 21-3 中 。 
表 21-3 position 属 性 的 值 





















































值 说 明 
static 元 素 为 普通 布局 ， 默 认 值 
Telative 元 素 位 置 相 对 于 普通 位 置 定位 
absolute 元 素 相对 于 position 值 不 为 static 的 第 一 位 祖先 元 素来 定位 
fixed 元 素 相对 于 浏览 器 窗口 来 定位 



































position 属 性 的 不 同 值 指 定 了 元 素 定 位 所 针对 的 不 同 元 素 。 使 用 top、bottom、left 和 right 
盟 性 设置 元 素 的 偏 移 量 的 时 候 ， 指 的 是 相对 于 position 属 性 指定 的 元 素 的 偏 移 量 。 代 码 清单 21-1 
演示 了 不 同 取 值 的 效果 。 


代码 清单 21-1 使 用 position 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«style» 
img { 
top: 5px; 
left:150px; 
border: medium double black; 





























j 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<p> 
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One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 


</p> 
<img id-"banana" src="banana-small.png" alt-"small banana"/» 
«p» 
When travelling in Asia, I was struck by how many different 
kinds of banana were available - many of which had unique flavours and 
which were only avaiable within a small region. 
</p> 
<p> 
<button>Static</button> 
<button>Relative</button> 
<button>Absolute</button> 
<button>Fixed</button> 
</p> 
<script> 
var buttons = document.getElementsByTagName("BUTTON") ; 
for (var i = 0; i « buttons.length; i++) { 
buttons[i].onclick = function(e) { 
document .getElementById("banana").style.position = 
e. target. innerHTML; 


}; 
} 


</script> 
</body> 
</html> 


在 上 面 的 代码 示例 中 ， 我 为 页 面 添加 了 一 个 小 脚本 ， 它 可 以 基于 被 按 下 的 按钮 改变 img 元 素 
的 position 属 性 的 值 。 注 意 我 将 left 属 性 设置 为 130px, 将 top 属 性 设置 为 3px, 意思 是 只 要 position 
值 不 设 为 static, img 元 素 就 将 沿 水 平 轴 偏 移 150 像 素 , 沿 垂直 轴 偏 移 $ 像 素 。 图 21-1 展 示 了 postion 
值 从 static 到 relative 的 变化 。 
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When travelling in Asia, I was struck by how many 
different kinds of banana were available - many of 
which had unique flavours and which were only 
avaiable within a small region. 


avaiable within a small region. 
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图 21-1 postion 属 性 取 static 和 relative 值 
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relative 值 为 元 素 应 用 top、bottom、left 和 right 属 性 ， 相对 于 static 值 确定 的 位 置 重新 定位 
元 素 。 从 图 中 我 们 可 以 看 到 ，left 属 性 和 top 属 性 的 取 值 引起 img 元 素 向 右 、 向 下 移动 。 

absolute 值 会 根据 position 值 不 是 static 的 最 近 的 祖先 元 素 的 位 置 来 定位 元 素 。 在 这 个 示例 
中 不 存在 这 样 的 元 素 ， 也 就 是 说 元 素 是 相对 于 body 元 素 定 位 的 ， 如 图 21-2 所 示 。 
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图 21-2 ”position 属 性 取 absolute 值 


注意 一 下 ， 如 果 我 滚动 浏览 器 页 面 ，img 元 素 会 跟 剩余 的 内 容 一 起 移动 。 可 以 将 这 个 情况 跟 
fixed 值 比较 一 下 ， mem 
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图 21-3 ”position 属性 取 fixed 值 
使 用 fixed 值 ， 元 素 是 相对 于 浏览 器 窗口 定位 的 。 也 就 是 说 元 素 始终 占据 同样 的 位 置 ， 无 论 
剩余 内 容 是 否 向 上 向 下 滚动 。 
21.1.2 ”设置 元 素 的 层 琶 顺序 
z-index 属 性 指定 元 素 显 示 的 层 三 顺序 。 表 21-4 总 结 了 这 个 属性 。 


表 21-4 z-index 属性 


属 性 说 明 值 
z-index 设置 元 素 的 相对 层 闭 顺 请 < 数值 > 
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z-index 属 性 的 值 是 数值 ， 且 人 允许 取 负 值 。 值 越 小 ， 在 层 受 顺序 中 就 越 乱 后 。 这 个 
在 元 素 重 做 的 情况 下 才 会 排 上 用 场 ， 如 代码 清单 21-2 所 示 。 


代码 清单 21-2 使 用 z-index 属性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 














«style» 
img { 
border: medium double black;; 
background-color: lightgreay; 
position: fixed; 
} 
#banana { 
z-index: 1; 
top: 15px; 
left:150px; 
j 
ftapple { 
z-index: 2; 
top: 25px; 
left:120px; 
} 
</style> 
</head> 
<body> 
<p> 


There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 

<p> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 

its apples. 


</p> 
<img id="banana" src="banana-small.png" alt="small banana"/> 
<img id="apple" src="apple.png" alt="small banana"/> 





<p> 
When travelling in Asia, I was struck by how many different 
kinds of banana were available - many of which had unique flavours and 
which were only avaiable within a small region. 
</p> 
</body> 


</html> 








| 
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在 这 个 例子 中 ,我 创建 了 两 个 固定 位 置 的 img 元 素 , 设置 了 它们 top 和 left 值 使 两 者 部 分 图 像 
重 羡 。id 值 为 apple 的 img 元 素 的 z-index 值 (2) 比 id 值 为 banana 的 img 元 素 的 z-index 值 (1) EX, 
因此 苹果 图 像 显示 在 香蕉 图 像 上 面 ， 如 图 21-4 所 示 。 
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图 21-4 ”使 用 z-index 属性 
z-index 属性 的 默认 值 是 9， 因 此 浏览 器 默认 将 图 像 显 示 在 p 元 素 上 面 。 
21.2 ”创建 多 列 布 局 


多 列 特性 允许 在 多 个 垂直 列 中 布局 内 容 ， 跟 报纸 的 排版 方式 类 似 。 表 21-5 描 述 了 多 列 属性 。 
表 21-5 ”多 列 属性 
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m 性 说 Bj 值 
column-count 指定 列 数 < 数值 > 
column-fill 站 定 内 容 在 列 与 列 之 间 的 分 布 方式 ，balance 指 浏览 器 确保 不 同 列 balance 

之 间 的 长 度 差异 尽 可 能 小 。 如 果 取 auto 值 ， 则 按照 顺序 填充 列 O° 
column-gap 间 定 列 之 间 的 距离 《长 度 值 > 
column-rule 在 一 条 声明 中 设置 column-rule-* 的 简写 属性 CGU A» ESO UR 6» 
column-rule-color ”设置 列 之 间 的 颜色 规则 < 颜色 > 
column-rule-style ”设置 列 之 间 的 样式 规则 跟 border-style 属 性 的 值 相同 
column-rule-width ”设置 列 之 间 的 宽度 < 长 度 值 > 
columns 设置 column-span 和 column-width 的 简写 属性 《长度 值 > < 数值 > 
column-span 指定 元 素 横 向 能 跨 多 少 列 kis 
a 

column-width 指定 列 宽 < 长 度 值 > 


代码 清单 21-3 展 示 了 应 用 于 HTML 文 档 的 多 列 布局 。 
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代码 清单 21-3 ”使 用 多 列 布局 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«style» 
pt 
column-count: 3; 
column-fill: balance; 
column-rule: medium solid black; 
column-gap: 1.5em; 
) 
img ( 
float: left; 
border: medium double black; 
background-color: lightgray; 
padding: 2px; 
margin: 2px; 
«/style» 
«/head» 
«body» 
«p» 


There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

«img src-"apple.png" alt-"apple"/» 

One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 

its apples. 
<img src-"banana-small.png" alt="banana"/> 

When travelling in Asia, I was struck by how many different 

kinds of banana were available - many of which had unique flavours and 
which were only avaiable within a small region. 


And, of course, there are fruits which are truely unique - I am put in mind 
of the durian, which is widely consumed in SE Asia and is known as the 
"king of fruits". The durian is largely unknown in Europe and the USA - if 
it is known at all, it is for the overwhelming smell, which is compared 
to a combination of almonds, rotten onions and gym socks. 
</p> 

</body> 

</html> 


在 上 述 示例 代码 中 ， 我 为 p 元 素 应 用 了 几 个 多 列 属性 。p 元 素 中 混合 了 text 元 素 和 img 元 素 ， 
设置 列 布局 之 后 的 效果 如 图 21-5 所 示 。 

















注意 上 面 的 图 是 用 Opera 浏 览 器 显示 的 ， 是 在 本 书写 作 过 程 中 唯一 支持 多 列 布局 的 浏览 器 。 多 
列 布局 中 的 一 些 属性 还 没有 实现 ， 不 过 呈现 基本 功能 不 存在 问题 。 
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从 图 21-5 可 以 看 出 ，p 元 素 中 的 内 容 从 一 列 流向 男 一 列 ， 跟 报纸 中 的 排版 很 像 。 在 这 个 例子 
中 , 我 为 img 元 素 应 用 了 float 属 性 , 这 样 p 元 素 中 的 文本 内 容 就 可 以 流畅 地 环绕 在 图 像 周 围 。 Float 








属性 的 详细 内 容 请 见 第 20 音 。 
上 面 的 示例 中 使 用 了 column-co 


ni 
pra 











unt 属 性 将 页 面 布 局 分 为 三 列 。 如 果 窗 口 大 小 调整 ， 





浏览 锅 会 


自行 调整 列 宽度 ， 从 而 保留 布局 中 的 列 数 。 另 一 种 方法 是 指定 列 宽 度 ， 如 代码 清单 21-4 所 示 。 


代码 清单 21-4 ”设置 列 宽度 


<style> 
pt 
column-width: 10em; 
column-fill: balance; 
column-rule: medium solid 
column-gap: 1.5em; 


} 

img { 
float:left; 
border: medium double bla 
background-color: lightgr 
padding: 2px; 
margin: 2px; 

} 


</style> 


如 果 应 用 column-width 属 性 ， 
所 示 。 


black; 


ck; 
ay; 


浏览 器 会 通过 添加 或 者 删除 列 数 维持 指定 列 宽 ， 如 图 21-6 
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21.3 创建 弹性 盒 布 局 


弹性 盒 布 局 (也 称 为 伸缩 盒 ) 在 CSS3 中 得 到 了 进一步 增强 ， 为 display 属 性 添加 了 一 个 新 值 
( flexbox )， 并 定义 了 其 他 几 个 属性 。 使 用 弹性 布局 可 以 创建 对 浏览 器 窗口 调整 响应 良好 的 流动 
界面 。 这 是 通过 在 包含 元 素 之 间 分 配 容器 块 中 未 使 用 的 空间 来 实现 的 。 规 范 为 弹性 布局 定义 了 如 
口 flex-align; 

口 flex-direction; 
口 flex-order; 
口 flex-pack。 

就 在 我 写 下 这 些 内 容 的 时 候 ,， 弹 性 盒 布局 的 标准 仍然 处 于 变化 之 中 。 属 性 的 名 称 和 值 最 近 刚 
变 过 , 主流 浏览 器 使 用 浏览 器 厂商 特定 前 绥 属 性 和 值 实 现 了 这 个 特性 的 核心 功能 , 不 过 是 基于 已 
有 的 属性 名 。 

弹性 盒 布局 非常 实用 ， 是 CSS 中 新 增 的 重要 特性 。 接 下 来 我 会 基于 标准 的 早期 草案 以 及 使 用 
-webkit 前 绥 属 性 展示 其 功能 。 这 种 解决 方案 并 不 理想 ， 不 过 会 让 你 对 弹性 盒 的 功能 有 个 大 致 了 
解 。 真 诚 地 希望 弹性 盒 布 局 广泛 实现 和 可 用 之 后 , 这 里 的 内 容 能 让 你 轻松 过 渡 到 完善 的 标准 。 鉴 
于 规范 和 实现 之 间 还 有 差异 ， 先 让 我 们 定义 一 下 弹性 盒 要 解决 的 问题 。 代 码 清单 21-5 展 示 了 一 个 
有 问题 的 简单 布局 。 


代码 清单 21-5 有 问题 的 简单 布局 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
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«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pt 

float:left; 

width: 150px; 

border: medium double black; 

background-color: lightgray; 





} 
</style> 
</head> 
<body> 
<div id="container"> 
<p id="first"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, 
oranges, and other well-known fruit, we are faced with thousands 
of choices. 
</p> 
<p id="second"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 
</p> 
<p id="third"> 
When travelling in Asia, I was struck by how many different kinds of 
banana were available - many of which had unique flavours and which 
were only avaiable within a small region. 
</p> 
</div> 
</body> 
</html> 


在 上 述 示 例 代码 中 ，div 元 素 包含 了 三 个 p 元 素 。 我 想 将 p 元 素 显示 在 水 平行 中 ， 用 float 属 
很 容易 就 能 做 到 这 一 点 (关于 float 属 性 请 参阅 第 20 章 ), 图 21-7 显 示 了 浏览 器 如 何 显示 这 个 HTML 
文档 。 
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图 21-7 具有 未 分 布 的 空空 间 的 元 素 
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这 里 我 们 能 使 用 弹性 盒 解 决 的 问题 是 处 理 页 面 上 p 元 素 右 边 的 空空 间 块 。 解 决 这 个 问题 有 多 
种 方式 。 在 这 个 例子 中 ,可 以 使 用 百分比 宽度 , 但 弹性 盒 解决 方案 要 更 优雅 ， 页 面 看 起 来 流动 性 
也 会 好 很 多 。 表 21-6 列 出 了 实现 弹性 盒 核心 功能 的 三 个 -wepkit 属 性 〈 简单 起 见 ， 表 中 省 略 了 


-webkit 前 组 )。 






































表 21-6  -webkits& MES a lE 

属 性 说 明 值 

box-align 如 果 内 容 元 素 的 高 度 小 于 容器 的 高 度 ， 告 诉 浏览 器 如 何 处 理 多 余 的 空间 start 
isl 

















center 
baseline 
stretch 


box-flex 指定 元 素 的 可 伸缩 性 ， 应 用 于 弹性 盒 容 器 内 的 元 素 < 数值 > 


box-pack 如 果 可 伸缩 元 素 达 到 最 大 尺寸 ,告诉 浏览 器 如 何 分 配 空间 2 
en 
center 
justify 





















































21.3.1 创建 简单 的 弹性 盒 


可 以 使 用 display 属 性 创建 弹性 盒 。 标 准 值 是 flexpox， 不 过 在 标准 完成 和 实现 之 前 ， 必 须 使 
用 -webkit-box。 使 用 box-flex 属 性 告诉 浏览 器 如 何 分 配 元 素 之 间 的 未 使 用 空间 。display 属 性 的 
新 值 和 box-flex 属 性 如 代码 清单 21-6 所 示 。 
代码 清单 21-6 ”创建 简单 的 弹性 盒 


<!DOCTYPE HTML> 



































<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pi 
width: 150px; 
border: medium double black; 
background-color: lightgray; 
margin: 2px; 
} 
#container { 
display: -webkit-box; 
#second { 
-webkit-box-flex: 1; 
</style> 
</head> 


<body> 
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<div id="container"> 

<p id="first"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, 
oranges, and other well-known fruit, we are faced with thousands 
of choices. 

</p> 

<p id="second"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 

</p> 

<p id="third"> 
When travelling in Asia, I was struck by how many different kinds of 
banana were available - many of which had unique flavours and which 
were only avaiable within a small region. 

</p> 

</div> 
</body> 
</html> 


display 属 性 会 应 用 到 弹性 盒 容 器 。 弹 性 盒 容 器 是 具有 多 余 空间 ， 且 我 们 想 对 其 中 的 内 容 应 
用 弹性 布局 的 元 素 。pox-flex 属 性 会 应 用 到 弹性 盒 容 顺 内 的 元 素 ， 告诉 浏览 右 当 容器 大 小 改变 时 
哪些 元 素 的 尺寸 是 弹性 的 。 在 这 个 例子 中 ， 我 选择 了 id 值 为 second 的 p 元 素 。 




















提示 我 从 p 元 素 的 样式 声明 中 删除 了 float 属 性 。 可 伸缩 元 素 不 能 包含 浮动 元 素 。 


可 以 从 图 21-8 看 出 浏览 器 如 何 伸缩 选中 元 素 的 尺寸 。 
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ailable in each country. I live near London, in an area which is 
mown for its apples. 


























图 21-8 ”可 伸缩 元 素 


我 放大 了 图 21-8 中 的 浏览 器 窗口 ， 这 导致 div 容 需 扩 大 以 及 第 二 个 段落 伸 长 ， 从 而 占据 多 余 
空间 。 伸缩 不 仅 是 对 多 余 空 间 来 说 的 ， 如 果 缩 小 浏览 咒 窗 口 ， 可 伸缩 元 素 同 样 会 被 调整 尺寸 以 适 
应 空间 损失 ， 如 图 21-9 所 示 。 





446 第 21 章 创建 布局 





r 





/ 国 Eample X ap 





€ Q | O titan/listings/example.html wht 























图 21-9 调整 可 伸缩 元 素 适 应 空间 损失 
21.3.2 ”伸缩 多 个 元 素 


应 用 box-flex 属 性 可 以 告诉 浏览 器 伸缩 多 个 元 素 的 尺寸 。 你 设置 的 值 决 定 了 浏览 器 分 配 空间 
的 比例 。 代 码 清 单 21-7 展 示 了 前 一 个 例子 中 元 素 样式 的 改变 。 


代码 清单 21-7 创建 多 个 可 伸缩 元 素 





<style> 

pt 
width: 150px; 
border: medium double black; 
background-color: lightgray; 
margin: 2px; 

} 

#container { 
display: -webkit-box; 


#first { 
-webkit-box-flex: 3; 
} 
#second { 
-webkit-box-flex: 1; 


</style> 








这 里 将 box-flex 属 性 应 用 到 了 id 值 为 first 的 p 元 素 。 此 人 处 box-flex 属 性 的 值 是 3, 意思 是 浏览 








意思 是 
器 为 其 分 配 的 多 余 空 间 是 为 id 值 为 second 的 p 元 素 的 三 倍 。 当 你 创建 此 类 比例 时 ， 你 指 的 是 元 素 











的 可 伸缩 性 。 你 只 是 使 用 这 个 比例 来 分 配 多 余 的 空间 , 或 者 减 小 元 素 的 尺寸 ， 而 不 是 改变 它 的 首 
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选 尺寸 。 从 图 21-10 可 以 看 到 这 个 比例 是 怎么 应 用 到 元 素 的 。 








BY Eample E 
€ CO titan/listings/example.html 


[There are lots of different kinds of fruit - there 
are over 500 varieties of banana alone. By the 

















图 21-10 创建 伸缩 比例 
21.3.3 “处理 垂直 空间 
box-align 属 性 告诉 浏览 器 如 何 处 理 多 余 的 垂直 空间 。 这 个 元 素 总 结 在 表 21-7 中 。 


John Te. 











表 21-7 box-align 属 性 



































R 性 "EET ff 
box-align 指定 浏览 器 如 何 处 理 多 余 的 垂直 空间 ad 
strech 
center 
默认 情况 下 垂 





直 拉 伸 元 素 以 填充 多 余 的 空间 。 图 21-10 就 是 这 种 情况 ， 前 两 个 p 元 素 的 尺寸 是 
调整 过 的 ， 内 容 下 面 多 出 了 空 的 空间 。 表 21-8 展 示 了 box-align 属 性 的 可 能 取 值 。 


表 21-8 box-align 属 性 的 值 





















































值 说 明 
start 元 素 沿 容器 的 顶 边 放置 ， 任 何 空空 间 都 在 其 下 方 显 示 
end 元 素 沿 容器 的 底 边 放置 ， 任 何 空空 间 都 在 其 上 方 显 示 
center 多 余 的 空间 被 平分 为 两 部 分 ,分 别 显示 在 元 素 的 上 方 和 下 方 
strech 调整 元 素 的 高 度 ， 以 填充 可 用 空间 
代码 清单 21-8 展 示 了 元 素 样式 变 为 应 用 box-align 属 性 。 这 个 属性 应 用 到 可 伸缩 容器 上 ， 
而 不 是 内 容 元 素 。 


代码 清单 21-8 ”应 用 box-align 属 性 


<style> 
pt 
width: 150px; 
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border: medium double black; 
background-color: lightgray; 
margin: 2px; 

} 

#container { 
display: -webkit-box; 
-webkit-box-direction: reverse; 
-webkit-box-align: end; 


} 

#first { 
-webkit-box-flex: 3; 

} 

#second { 
-webkit-box-flex: 1; 


</style> 








在 这 个 例子 中 ,我 使 用 了 end 值 ， 这 代表 内 容 元 素 会 沿 着 容器 元 素 的 底 边 放置 ， 垂 直方 向 任 
何 多 余 的 空间 都 会 显示 到 内 容 元 素 上 方 。 这 个 值 的 呈现 效果 如 图 21-11 所 示 。 
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fruit - there are over 500 varieties of 
banana alone. By the time we add 




















图 21-11 应 用 box-align 属 性 


21.3.4 “处理 最 大 尺寸 


弹性 盒 模 型 伸缩 时 不 会 超过 内 容 元 素 的 最 大 尺寸 值 。 如果 存在 多 余 空 间 , 浏览 器 会 伸展 元 素 ， 
直到 达到 最 大 允许 尺寸 。box-pack 属 性 定义 了 在 所 有 的 可 伸缩 元 素 均 达到 最 大 尺寸 的 情况 下 ,多 
余 空 间 仍 未 分 配 完毕 时 应 该 如 何 处 理 。 这 个 属性 总 结 在 表 21-9 中 。 


表 21-9 ”box-pack 属 性 

















属 性 说 明 值 
box-pack 在 不 能 将 多 余 空间 分 配给 可 伸缩 元 素 的 情况 下 ， 如 何 处 理 Se 
justify 


center 
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表 21-10 描 述 了 这 个 属性 的 可 能 值 。 ERI 
3&21-10 ”box-pack 属 性 的 值 


























值 说 明 
start 元 素 从 左边 界 开 始 放置 ， 任 何 未 分 配 的 空间 显示 到 最 后 一 个 元 素 的 右边 
end 元 素 从 右边 界 开 始 放 置 ， 任 何 未 分 配 的 空间 显示 到 第 一 个 元 素 的 左边 
center 多 余 空 间 平均 分 配 到 第 一 个 元 素 的 左边 和 最 后 一 个 元 素 的 右边 
justify 多 余 空间 均匀 分 配 到 各 个 元 素 之 间 


代码 清单 21-9 展 示 了 box-pack 属 性 的 有 用法。 注意， 我 为 p 元 素 定 义 了 max-width 值 (要 了 解 
max-width 的 更 多 信息 ， 请 参考 第 20 章 )。 


代码 清单 21-9 ”使 用 box-pack 属 性 


<!DOCTYPE HTML> 





«html» 
«head» 
«title»Example«/title» 
«meta name-"author" content-"Adam Freeman"/» 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pt 
width: 150px; 
max-width: 250px; 
border: medium double black; 
background-color: lightgray; 
margin: 2px; 
} 


#container { 
display: -webkit-box; 
-webkit-box-direction: reverse; 
-webkit-box-align: end; 
-webkit-box-pack: justify; 
} 
#first { 
-webkit-box-flex: 3; 
} 
#second { 
-webkit-box-flex: 1; 
} 
</style> 
</head> 
<body> 
«div id="container"> 
<p id="first"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, 
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oranges, and other well-known fruit, we are faced with thousands 
of choices. 

</p> 

<p id="second"> 


One of the most interesting aspects of fruit is the variety available in 


each country. I live near London, in an area which is known for 
its apples. 

</p> 

<p id="third"> 
When travelling in Asia, I was struck by how many different kinds of 
banana were available - many of which had unique flavours and which 
were only avaiable within a small region. 

</p> 

</div> 
</body> 
</html> 








这 个 属性 的 效果 如 图 21-12 所 示 。 在 可 伸缩 p 元 素 达 到 最 大 宽度 后 , 浏览 器 开始 在 元 素 之 间 分 
配 多 余 空间 。 HER, 多余 空间 只 是 分 配 到 元 素 与 元 素 之 间 , 第 一 个 元 素 之 前 或 者 最 后 一 个 元 素 之 

















后 都 没有 分 配 。 
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图 21-12 ”使 用 box-pack 属 性 


21.4 创建 表格 布局 


table 元 素 广泛 用 于 布局 Web 页 面 已 有 多 年 历史 ,但 随 着 对 HTML 元 素 语义 重要 性 的 不 断 强 
调 ,，table 元 素 今 非 昔 比 。 如 果 只 是 在 HTMLS 中 使 用 table 元 素来 呈现 列表 数据 , 那么 你 必须 慎之 





又 慎 (具体 细节 请 参阅 第 11 章 )。 


当然 ， 使 用 table 元 素 如 此 普遍 的 原因 是 它 解决 了 一 种 常见 的 布局 问题 : 创建 承载 内 容 的 简 
单 网 格 。 过 好, 我 们 可 以 使 用 CSS 表 格 布局 特性 来 设置 页 面 布局 , 这 很 像 使 用 table 元 素 , 但 不 会 





破坏 语义 重要 性 。 创 建 CSS 表 格 布 局 使 用 display 属 性 。 表 21-11 列 出 了 跟 这 个 特 伯 
中 的 每 个 值 都 与 一 个 HTML 元 素 对 应 。 


E 相 关 的 值 。 表 
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表 21-11” 跟 表格 布局 相关 的 display 属 性 的 什 ERI 
fü 说 — HB 
table 类 似 table 元 素 
inline-table 类 似 table 元 素 , 但 是 创建 一 个 行内 元 素 ( 关于 块 级 元 素 和 行内 元 素 的 详细 信息 请 参考 第 20 章 ) 
table-caption 类 似 caption 元 素 
table-column 类 似 col 元 素 
table-column-group ”类 似 colgroup 元 素 
table-header-group ”类 似 thead 元 素 
table-row-group 类 似 tbody 元 素 
table-footer-group ”类 似 tfoot 元 素 
table-row 类 似 tr 元 素 
table-cell 类 似 td 元 素 





其 中 几 个 值 的 用 法 如 代码 清单 21-10 所 示 。 
代码 清单 21-10 ”创建 CSS 表 格 布局 


<!DOCTYPE HTML> 
«html» 
«head» 

<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 


#table ( 
display: table; 

} 

div.row { 
display: table-row; 
background-color: lightgray; 


pt 
display: table-cell; 
border: thin solid black; 
padding: 15px; 
margin: 15px; 


img { 
float:left; 


</style> 
</head> 
<body> 





There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 


One of the most interesting aspects of fruit is the variety available 
in each country. I live near London, in an area which is known for 


When travelling in Asia, I was struck by how many different kinds of 
banana were available - many of which had unique flavours and which 


This is an apple. <img src="apple.png" alt="apple"/> 


This is a banana. <img src="banana-small.png" alt="banana"/> 
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<div id="table"> 
<div class="row"> 
<p> 
thousands of choices. 
</p> 
<p> 
its apples. 
</p> 
<p> 
were only avaiable within a small region. 
</p> 
</div> 
<div class="row"> 
<p> 
</p> 
<p> 
</p> 
<p> 
No picture here 
</p> 
</div> 
</div> 
</body> 
</html> 


这 些 取 值 的 效果 如 图 21-13 所 示 。 
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By Example E 
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There are lots of different kinds of 
fruit - there are over 500 varieties 
of banana alone. By the time we 

add the countless types of apples, 


oranges, and other well-known 
fruit, we are faced with thousands 
of choices. 


When travelling in Asia. I 
was struck by how many 
different kinds of banana 
were available - many of 
which had unique flavours 
and which were only 
avaiable within a small 


region. 





No picture here 














简单 的 CSS 表 格 布局 
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CSS 表 格 布局 的 一 个 优点 是 自动 调整 单元 格 大 小 ， 因 此 , 行 是 由 该 行 中 内 容 最 高 的 单元 格 决 ER 
定 的 ， 列 是 由 该 列 中 内 容 最 宽 的 单元 格 决定 的 ， 这 从 图 21-13 中 也 能 看 出 来 。 











21.5 小结 





本 章 学 习 了 用 于 创建 布局 的 CSS 特 性 ， 从 简单 的 元 素 定位 ， 到 弹性 盒 布局 的 流动 性 。 我 还 为 
尔 展示 了 如 何 创建 CSS 表 格 布局 ， 从 而 不 再 滥用 HTML 元素。 

布局 在 各 个 CSS3 模 块 中 都 引起 了 极 大 关注 ， 但 目前 它 仍 处 于 早期 发 展 阶段 ， 很 多 特性 设置 
还 没有 被 恰当 地 定义 或 者 由 浏览 器 实现 。 暂 时 还 有 大 量 工作 要 做 ( 尤其 是 采用 CSS 布 局 框架 的 情 
况 )， 我 建议 你 密切 关注 受 欢 迎 的 新 的 CSS 布 局 模块 。 
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设置 文本 样式 











本 童 介绍 用 于 设置 文本 样式 的 CSS 属 性 。 这 块 内 容 在 CSS3 中 也 不 稳定 。 已 经 有 儿 个 被 广泛 采 
用 的 非常 实用 的 新 特性 了 (我 会 在 接 下 来 的 几 节 介绍 )。 也 有 几 个 相当 投机 性 的 提案 〈 其 前 途 未 
卜 )， 它 们 一 般 用 来 处 理 非常 技术 的 字体 排版 细节 ， 还 不 确定 是 否 存 在 足够 的 需求 推动 这 些 提案 
成 为 标准 。 也 就 是 说 ,已 经 被 主流 浏览 咒 接 纳 的 特性 会 让 处 理 文本 样式 更 为 灵活 和 愉悦 。 表 22-1 
是 本 章 内 容 的 一 个 总 结 。 









































22-1 本章 内 容 概要 



































有 B — ——  RBmXx5ER O 
文本 块 对齐 使 用 text-align 和 text-justify 属 性 22-1 
定义 如 何 处 理 空白 使 用 white-space 属 性 22-2, 22-3 
指定 文本 方向 使 用 direction 属 性 22-4 

站 定 单词 之 间 、 字 母 之 间 、 文 ”使 用 letter-spacing、word-spacing 和 ]ine-height 属 性 22-5 
本 行 之 间 的 间隔 
指定 溢出 文本 如 何 断 行 使 用 word-wrap 属 性 22-6 
指定 文本 缩 进 使 用 text-indent 属 性 22-7 
装饰 文本 或 者 转换 文本 大 小 写 使 用 text-decoration 或 者 text-transform 属 性 22-8 
为 文本 块 应 用 阴影 效果 使 用 text-shadow 属 性 22-9 
设置 字体 使 用 font font-family, font-size, font-style, font-variant #l 22-10 ~ 22-12 
font-weight 属 性 





























使 用 自 定义 字体 使 用 efont-face 22-13 


提示 “color 属性 可 以 用 来 设置 文本 的 颜色 ， 这 个 属性 在 第 24 章 介绍 。 


22.1 应 用 基本 文本 样式 
在 接 下 来 的 各 节 中 ， 我 们 来 学 习 如 何 使 用 应 用 基本 文本 样式 的 属性 。 
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22.1.1 ”对 齐 文本 
有 好 几 个 属性 可 以 用 来 设计 文本 内 容 的 对 齐 方式 ， 如 表 22-2 所 示 。 


表 22-2 ”对 齐 属 性 
属 性 说 OR 值 
text-align 指定 文本 块 的 对 齐 方式 start 


end 
left 
right 
center 


justify 
text-justify 如 果 text-align 属 性 使 用 了 justify 值 , 则 该 值 会 用 来 指定 对 齐 文本 的 规则 参见 表 22-3 



































\— 

















text-align 属 性 相当 简单 ， 不 过 ， 需 要 注意 的 重要 一 点 是 : 可 以 将 文本 对 齐 到 显 式 命名 的 某 
个 边界 ( 使 用 left 或 者 right 值 ), 或 者 对 齐 到 语言 本 来 使 用 的 边界 (使 用 start 和 end 值 ), 在 处 理 
从 右 到 左 的 语言 时 ， 这 是 一 个 非常 重要 的 区 别 。 代 码 清单 22-1 展 示 了 应 用 到 文本 块 的 text-align 


m. 

















FE 


代码 清单 22-1 ”对齐 文 本 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
<style> 
#fruittext { 
width: 400px; 
margin: 5px; 
padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
} 
</style> 
</head> 
<body> 
«p id="fruittext"> 
There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 
One of the most interesting aspects of fruit is the 
variety available in each country. I live near London, in an area which is 
known for its apples. 
</p> 
<p> 
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<button>Start</button> 
<button>End</button> 
<button>Left</button> 
<button>Right</button> 
<button>Justify</button> 
<button>Center</button> 
</p> 
<script> 
var buttons = document.getElementsByTagName("BUTTON") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
document.getElementById("fruittext").style.textAlign = 
e.target.innerHTML; 
B 
} 
</script> 
</body> 
</html> 


在 这 个 例子 中 ， 我 添加 了 一 个 简单 的 脚本 ， 可 以 基于 被 按 下 的 按钮 改变 p 元 素 的 text-align 
属性 的 值 。 图 22-1 展 示 了 text-align 属 性 取 其 中 两 个 值 时 文本 对 齐 的 效果 。 


r 














Le ej 
Bj bample 


Bl esmpl E 
lé Q © titan/listings/example-hty wef 


€ > C Otitan/iistings/exampientm 


There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types | 


There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types 
of apples, oranges, and other well-known fruit, we are faced with 


thousands of choices. One of the most interesting aspects of fruit is 
the variety available in each country. I live near London, in an area 
which is known for its apples. 


the variety available in each country. I live near London, in an area 











| 
[Stat] (End) (Let) [Right] (Justify) | Center] [Stan] (End) [Let] [Right] (Justify) [Center] | 

















图 22-1 ”text-align 属 性 取 center 和 right 值 的 效果 


如 果 使 用 justify 值 , 可 以 使 用 text-justify 属 性 指定 文本 添加 空白 的 方式 。 这 个 属性 允许 的 
值 如 表 22-3 所 示 。 

















表 22-3 text-justify 属 性 的 值 

值 说 —H 
auto 浏览 器 选择 对 齐 规则 ， 这 是 最 简单 的 方法 ， 不 过 ， 不 同 浏览 器 之 间 的 呈现 方式 会 有 微小 差别 
none 禁用 文本 对 齐 
白 分 布 在 单词 之 间 ， 适 用 于 英语 等 词 间 有 空 的 语言 
白 分 布 在 单词 、 表 意 字 之 间 ， 且 文本 两 端 对 齐 ， 适 用 于 汉语 、 日 文 和 韩文 等 语言 
白 分 布 在 单词 、 字 形 集 的 边界 ， 适 用 于 泰文 等 无 词 间 空格 的 语言 
distribute 白 分 布 在 单词 、 字 
kashida 通过 拉 长 选 定 字 符 调整 对 齐 方式 〈 仅 适用 于 草 体 ) 
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inter-word 

















Ht 





inter-ideograph 














HB 





inter-cluster 
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22.1.2 AEF 


空白 在 HTML 文 档 中 通常 是 被 压缩 或 者 直接 忽略 掉 。 这 允许 你 将 HTML 文 档 的 布局 跟 页 面 的 
外 观 分 离 。 代 码 清单 22-2 展 示 了 一 个 HTML 文 档 ， 其 中 的 文本 块 包含 了 空白 。 


代码 清单 22-2” 带 有 空白 的 HTMI 文 档 


«IDOCTYPE HTML» 














«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
#fruittext { 
width: 400px; 
margin: 5px; 
padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
} 
</style> 
</head> 
<body> 
<p id="fruittext"> 
There are lots of different kinds of fruit - there are over 500 
varieties 
of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 
One of the most interesting aspects of fruit is the 
variety available in each country. I live near London, 
in an area which is 
known for its apples. 
</p> 
</body> 
</html> 


在 上 面 的 代码 中 , 文本 包含 了 一 些 空格 、 制 表 符 和 换行 符 。 浏 览 器 遇 到 多 个 空格 时 ,会 将 它 





们 压缩 为 一 个 


空格 ,而 换行 符 等 其 他 空白 符 则 会 直接 被 忽略 。 浏览 器 会 自动 处 理 文本 换行 ,以 便 











各 行 都 能 适应 元 素 边界 。 浏 览 器 如 何 显示 示例 中 的 文本 呢 ? 请 看 图 22-2。 
浏览 器 的 这 种 处 理 方式 并 不 总 是 我 们 想 要 的 ， 有 时 候 我 们 就 想 TM ee CAB 


中 的 空白 。 
在 表 22-4 中 。 











这 时 ， 可 以 使 用 whitespace 属 性 控制 浏览 器 对 空白 字符 的 处 理 方式 。 这 个 属性 总 结 
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r (5) e | 
c3 
Example Y * 


个 Œ | Q titan/listings/example.html wel 





There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types 
of apples, oranges. and other well-known fruit, we are faced with 


thousands of choices. One of the most interesting aspects of fruit is 
the variety available in each country. I live near London, in an area 
which is known for its apples. 




















图 22-2 ” HTML 文档 中 空白 字符 的 默认 处 理 方式 





表 22-4 whitespace 属 性 














属 性 说 RR 值 
whitespace 指定 空白 字符 的 处 理 方式 参见 表 22-5 





whitespace 属 性 允许 的 取 值 列 在 了 表 22-5 中 。 
表 22-5 whitespace 属 性 的 值 





"uni 



























































人 
normal 默认 值 ， 空 白 符 被 压缩 ， 文 本 行 自动 换行 
nowrap 空白 符 被 压缩 ， 文 本 行 不 换行 
pre 空白 符 被 保留 ， 文 本 只 在 遇 到 换行 符 的 时 候 换 行 ， 这 跟 pre 元 素 (参见 第 8 章 ) 的 效果 一 样 
pre-line 空白 符 被 压缩 ， 文 本 会 在 一 行 排 满 或 遇 到 换行 符 时 换行 
pre-wrap 空白 符 被 保留 ， 文 本 会 在 一 行 排 满 或 遇 到 换行 符 时 换行 
代码 清单 22-3 演 示 了 whitespace 属 性 的 应 用 。 











代码 清单 22-3 ”使 用 whitespace 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
#fruittext { 
width: 400px; 
margin: 5px; 
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padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
white-space: pre-line; 
} 
</style> 
</head> 
<body> 
<p id="fruittext"> 
There are lots of different kinds of fruit - there are over 500 
varieties 


of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 


One of the most interesting aspects of fruit is the 
variety available in each country. I live near London, 


in an area which is 
known for its apples. 


</p> 
</body> 
</html> 


pre-line 值 的 效果 如 图 22-3 所 示 。 为 了 让 内 容 适 应 元 素 ， DUAR CAST T ÍT, 但 是 保 
留 了 换行 符 ( 即 断 行 )。 
D EXIT 
j By Example x Ve 
€ Œ | Q titan/listings/example.html 家 | 入 














There are lots of different kinds of fruit - there are over 500 
ok 


of banana alone. By the time we add the countless types of 
apples, oranges. and other well-known fruit, we are faced with 
thousands of choices. 


One of the most interesting aspects of fruit is the 
variety available in each country. I live near London, 


in an area which is 
known for its apples 





























图 22-3 ”使 用 whitespace 属 性 的 pre-Line 值 
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提示 CSS3 文本 模块 将 whitespace 定 义 为 另外 两 个 属性 的 简写 属性 :bikeshedding 和 text-wrap。 
这 两 个 属性 都 还 没有 实现 , bikeshedding 属 性 的 定义 还 不 完备 (其 中 的 一 大 问题 是 应 该 给 


它 取 个 更 直观 的 名 字 )。 


22.1.3 ”指定 文本 方向 


direction 属 性 告诉 浏览 器 文本 块 的 排列 方向 ， 如 表 22-6 所 示 。 
表 22-6 direction 属 性 











m 性 





说 W 值 
direction 设置 文本 方向 ae 
r 


代码 清单 22-4 列 出 了 direction 属 性 的 一 个 简单 应 用 。 
代码 清单 22-4 ”使 用 direction 属 性 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
Hfirst { 
direction: ltr; 
} 
#second { 
direction: rtl; 
</style> 
</head> 
<body> 
<p id="first"> 
This is left-to-right text 
</p> 
<p id="second"> 
This is right-to-lefttext 
</p> 
</body> 
</html> 





这 个 属性 的 效果 如 图 22-4 所 示 。 


Tipi 


+e 
A 


不 定 在 模块 最 终 完 善之 前 还 能 恢复 。 


direction 属 性 已 经 从 相关 CSS 模 块 的 最 新 草案 中 移 除 了 ， 不 过 也 没 给 出 具体 的 原因 ， 说 
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This is left-to-right text 


This is right-to-left text 

















图 22-4 ”使 用 direction 属 性 


22.1.4 ”指定 单词 、 字 母 、 行 之 间 的 间距 
可 以 告诉 浏览 器 单词 与 单词 、 字 母 与 字母 、 行 与 行 之 间 的 间距 。 相 关 属 性 列 在 了 表 22-7 中 。 
表 22-7 间距 属性 





























m 性 说 è Hj 值 

letter-spacing 设置 字母 之 间 的 间距 normal 
< 长 度 值 > 

word-spacing 设置 单词 之 间 的 间距 Normal 
< 长 度 值 > 

line-height 设置 行 高 Normal 
< 数值 > 
< 长 度 值 > 
<%> 








代码 清单 22-5 展 示 了 将 这 三 个 属性 应 用 到 一 个 文本 块 上 。 


代码 清单 22-5 ”使 用 letter-spacing、word-spacing 和 1Line-height 属 


<!DOCTYPE HTML> 
«html» 
«head» 
«title»Example«/title» 
«meta name-"author" content-"Adam Freeman"/» 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
#fruittext 1 
margin: 5px; 
padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
word-spacing: 10px; 
letter-spacing: 2px; 
line-height: 3em; 





HE 
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</style> 
</head> 
<body> 
«p id="fruittext"> 
There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 





</p> 
</body> 
</html> 
这 三 个 属性 的 效果 如 图 22-5 所 示 。 
Í lelek 
By temple i 
€ C |Q titan/listings/example.htm XA 


There are lots of different kinds of fruit - there are over 500 


| | varieties of banana alone. By the time we add the countless types 


of apples, oranges, and other well-known fruit, we are faced with 


thousands of choices. 














m 








图 22-5 ”应 用 letter-spacing、word-spacing 和 ]ine-height 属 性 





Hn 


22.1.5 ”控制 断 词 


word-wrap 属 性 告诉 浏览 器 当 一 个 单词 的 长 度 超出 包含 块 的 宽度 时 如 何 处 理 。 这 个 属性 允许 
的 值 列 在 了 表 22-8 中 。 











— 
| 


表 22-8 ”word-wrap 属 性 的 值 














值 说 明 
normal 单词 不 断 开 ， 即 使 无 法 完全 放 入 包含 块 元 素 
break-word 断 开 单 词 ， 使 其 放 入 包含 块 元 素 











代码 清单 22-6 展 示 了 word-wrap 属 性 的 应 用 。 
代码 清单 22-6 ”使 用 word-wrap 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
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<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
pti 

width:150px; 

margin: 15px; 

padding: 5px; 

border: medium double black; 

background-color: lightgrey; 

float:left; 





) 


#first { 
word-wrap: break-word; 
} 


#second { 
word-wrap: normal; 
} 


</style> 
</head> 
<body> 
<p id="first"> 
There are lots of different kinds of fruit - there are over 500 
varieties of madeupfruitwithaverylongname alone. 
</p> 
<p id="second"> 
There are lots of different kinds of fruit - there are over 500 
varieties of madeupfruitwithaverylongname alone. 
</p> 
</body> 
</html> 


上 面 的 代码 中 有 两 个 p 元 素 , 我 分 别 为 两 个 p 元 素 应 用 了 word-wrap 属 性 的 break-word 和 normal 

值 。 应 用 这 两 个 值 后 的 效果 如 图 22-6 所 示 。 
f c5 | oa) 
J Example X ben | 
€ Q | O titan/listings/example.html XA 









































图 22-6  fiiFHword-wrap/ 








FH 
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图 中 左边 的 p 元 素 使 用 了 break-word 值 ， 因 而 文本 中 的 长 单词 被 浏览 器 在 合适 的 位 置 断 开 ， 
能 够 完全 显示 在 p 元 素 中 。 右 边 的 p 元 素 使 用 了 normal 值 ， 意 思 是 浏览 器 不 会 断 开 长 单词 ， 即 使 长 
单词 溢出 p 元 素 。 























提示 “可 以 使 用 overflow 属 性 〈 参 见 第 20 章 ) 禁止 浏览 器 显示 溢出 的 文本 ， 不 过 这 样 导致 的 结 
果 就 是 直接 不 显示 超出 包含 元 素 的 部 分 。 


22.4.6 ” 首 行 缩 进 


text-indent 属 性 用 于 指 定 文本 块 首 行 缩 进 , 值 可 以 是 长 度 值 , 也 可 以 是 相对 于 元 素 宽度 的 百 
分 数值 。 表 22-9 总 结 了 这 个 属性 。 














表 22-9 ”text-indent 属 性 





| 0 18 € HB B  & 
text-indent 设置 文本 首 行 的 缩 进 < 长 度 值 > 
<%> 


代码 清单 22-7 展 示 了 这 个 属性 的 用 法 。 
代码 清单 22-7 使 用 text-indent 属 性 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pt 
margin: 15px; 
padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
float:left; 
text-indent: 15%; 
} 
</style> 
</head> 
<body> 
<p> 


There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 

One of the most interesting aspects of fruit is the 
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variety available in each country. I live near London, in an area which is 
known for its apples. 


</p> 
</html> 
缩 进 设置 的 显示 效果 如 图 22-7 所 示 。 
r E | al 
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There are lots of different kinds of fruit - there are 
over 500 varieties of banana alone. By the time we add the 
countless types of apples, oranges, and other well-known fruit, 


we are faced with thousands of choices. One of the most 
interesting aspects of fruit is the variety available in each country. 
I live near London, in an area which is known for its apples. 























图 22-7 文本 块 中 的 首 行 缩 进 





22.2 文本 装饰 与 大 小 写 转 换 


text-decoration 和 text-transform 两 个 属性 分 别 允 许 我 们 装饰 文本 和 转换 文本 大 小 写 。 这 两 
个 属性 如 表 22-10 所 述 。 











表 22-10 ”文本 装饰 和 大 小 写 转换 属性 
属 性 说 M fü 
text-decoration 为 文本 块 应 用 装饰 效果 none 
underline 
overline 
line-through 
blink 




















text-transform 为 文本 块 转换 大 小 写 none 


capitalize 
uppercase 
owercase 























text-decoration 属 性 为 文本 块 应 用 某 种 效果 ,如 下 划 线 ,默认 值 是 none ( 意思 是 不 应 
装饰 )。text-transform 属 性 改变 文本 块 的 大 小 写 , 默认 值 也 是 none。 下 面 看 一 下 应 用 这 两 个 属性 
的 示例 ， 如 代码 清单 22-8 所 示 。 


代码 清单 22-8 ”使 用 text-decoration 和 text-transform 属 性 


<!DOCTYPE HTML> 
<html> 
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<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
p { 
border: medium double black; 
background-color: lightgrey; 
text-decoration: line-through; 
text-transform: uppercase; 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 
One of the most interesting aspects of fruit is the 
variety available in each country. I live near London, in an area which is 
known for its apples. 
</p> 
</body> 
</html> 


text-decoration 属 性 使 用 了 line-through 值 ，text-transform 属 性 使 用 了 uppercase 值 ， 效 果 
如 图 22-8 所 示 。 














í ESI) 
Example b: T 
e Q | Q titan/listings/example.html wal 





























图 22-8 ”装饰 文本 和 转换 文本 大 小 写 


提示 应 该 谨慎 使 用 text-decoration 属 性 的 blick 值 , 它 产 生 的 效果 一 般 比 较 恼人 ， 尤 其 是 用 户 长 
时 间 使 用 页 面 的 情况 。 如 果 想 抓 住 用 户 的 注意 力 ， 建 议 你 找 一 下 其 他 刺激 性 较 小 的 方式 。 
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22.3 创建 文本 阴影 


A 


第 19 音 曾经 介绍 过 为 元 素 创建 阴影 ,我们 也 可 以 使 用 text-shadow 属 性 为 文本 创建 阴影 效果 。 CEN 
这 个 属性 总 结 在 表 22-11 中 。 























WW 
4 


322-11 text-shadow 属 性 





属 性 说 — HB fü 
text-shadow 为 文本 块 应 用 阴影 


<h-shadow> <v-shadow> <blur> <color> 


h-shadow 和 v-shadow 值 分 别 指定 阴影 的 水 平 偏 移 和 垂直 偏 移 。 它 们 的 值 用 长 度 值 表示 ， 人 允许 
负 值 。blur 值 也 是 一 个 长 度 值 ， 定 义 了 阴影 的 模糊 程度 ， 该 值 可 选 。color 值 指定 阴影 的 颜色 。 
代码 清单 22-9 展 示 了 text-shadow 属 性 的 用 法 。 




















代码 清单 22-9 ”使 用 text-shadow 属 1 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
h1 { 
text-shadow: 0.1em .1em 1px lightgrey; 
} 
pt 
text-shadow: 5px 5px 20px black; 
) 
</style> 
</head> 
<body> 
<hi>Thoughts about Fruit«/hi» 
«p» 
There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 
</p> 
</body> 
</html> 

















我 为 本 例 中 的 文本 应 用 了 两 种 不 同 的 阴影 ,效果 如 图 22-9 所 示 。 注 意 阴 影 的 形状 跟 文 本 字符 
的 形状 相似 ， 而 不 是 跟 包 含 元 素 的 形状 相似 。 
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Thoughts about Fruit 


There are lots of different kinds of fiuit - there are over 500 varieties of 
banana alone. By the tme we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 











图 22-9 ”为 文本 应 用 阴影 


22.4 使 用 字体 


我 们 可 以 对 文本 进行 许多 改变 ， 其 中 最 基本 的 一 项 就 是 改变 用 来 显示 字符 的 字体 。 表 22-12 
描述 了 字体 相关 属性 。 很 难 实现 字体 排版 方面 的 平衡 , 一 方面 , 高 级 用 户 想 控 制 字体 排版 的 方 方 
面 面 (这样 的 人 为 数 不 少 ); 男 一 方面 ， 普 通 设 计 师 和 程序 员 想 简便 快捷 地 用 上 一 些 字体 排版 特 
性 ， 同 时 又 不 必 理 会 细节 。 遗 憾 的 是 ，CSS 字 体 的 实现 无 法 满足 任何 一 方 的 要 求 。 深 入 的 技术 方 
面 基 本 上 还 没有 被 揭示 ,而 众所周知 的 那些 东西 对 主流 的 设计 师 和 程序 员 用 处 又 不 大 。 有 几 个 建 
议 的 CSS3 模 块 能 够 增强 字体 功能 ， 不 过 它们 还 只 是 处 于 早期 阶段 ， 没 有 吸引 任何 主流 实现 。 


表 22-12 ”字体 属性 


















































属 性 说 明 值 
font-family 指定 文本 块 采 用 的 字体 名 称 参见 表 22-13 
font-size 站 定 文本 块 的 字体 大 小 参见 表 22-14 
font-style 指定 字体 样式 Normal 

italic 

oblique 
font-variant 指定 字体 是 否 以 小 型 大 写字 母 显示 Normal 

smallcaps 
font-weight 设置 字体 粗细 Normal 

bold 

bolder 

lighter 

100 ~ 900 之 间 的 数字 
font 在 一 条 声明 中 设置 字体 的 简写 属性 参见 22.5 节 





font 属 性 值 的 格式 如 下 : 


font: <font-style> <font-variant> <font-weight> <font-size> <font-family> 
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22.4.1 选择 字体 


font-family 属 性 指定 使 用 的 字体 , 按照 优先 顺序 排列 。 浏览 器 从 字体 列表 中 的 第 一 种 开始 学 
试 ， 直 到 发 现 合 适 的 字体 为 止 。 这 种 方法 很 有 必要 ， 因 为 你 可 以 使 用 用 户 安 装 在 电脑 上 的 字体 ， 
而 由 于 操作 系统 和 偏好 不 同 ， 不 同 用 户 安装 的 字体 会 有 所 不 同 。 

当然 还 有 最 后 的 保障 : CSS 定 义 了 几 种 任何 情况 下 都 可 以 使 用 的 通用 字体 。 有 几 大 类 字体 ， 
称 为 通用 字体 系列 ， 浏 览 絮 在 呈现 这 些 字体 时 可 能 有 差异 。 表 22-13 总 结 了 通用 字体 系列 。 


表 22-13 ”通用 字体 系列 






































通用 字体 系列 实现 字体 示例 
serif Times 
sans-serif Helvetica 
cursive Zapf-Chancery 
fantasy Western 
monospace Courier 








代码 清单 22-10 展 示 了 为 文本 块 应 用 font-family 属 性 。 
代码 清单 22-10 ”使 用 font-family 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
p t 
padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
margin: 2px; 
float: left; 
font-family: "HelveticaNeue Condensed", monospace; 





j 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. 
</p> 
</body> 
</html> 


在 这 个 例子 中 ， 我 为 font-family 属 性 指定 了 HelveticaNeue Condensed 值 ， 这 是 Apress 出 版 社 
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使 用 的 字体 ， 并 非 在 所 有 系统 上 均 可 用 。 另 外 ， 我 指定 通用 字体 monospace 作 为 后 备 字体 ， 万 一 
HelveticaNeue Condensed 不 可 用 ， 就 可 以 用 monospace。 该 设置 的 效果 如 图 22-10 所 示 。 








/ 贺 eample NA 
€ e © titan/istings/example.htn] | e c © titan/listings/example.html Y " | 


over 500 varieties of banana alone. By the time we 


banana alone. By the time| 
countless types of apples| 
other well-known fruit, 
thousands of choices. 


add the countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of 
| choices. 





























[22-10 ”使 用 font-family 属 性 


图 22-10 中 右边 的 浏览 器 运行 在 我 用 来 撰写 本 书 的 电脑 上 , 这 台电 脑 安装 了 Apress 的 字体 , 因 
此 浏览 器 可 以 找到 HelveticaNeue Condensed 字 体 并 使 用 。 左 边 的 浏览 器 运行 在 我 的 测试 机 上 ， 它 
并 没有 安装 HelveticaNeue Condensed 字 体 ， 因 此 它 使 用 了 备用 monospace 字 体 。 








提示 使 用 后 备 字 体 可 能 发 生 的 一 种 情况 是 屏幕 上 显示 的 字体 大 小 不 一 样 。 我 们 从 上 面 的 图 中 
也 可 以 看 到 这 一 点 ， 后 备 字体 要 比 首选 字体 大 。font-size-adjust 可 用 来 计算 调整 比例 ， 
不 过 当前 只 有 Firefox 支 持 这 一 属性 


224.2 ”设置 字体 大 小 
font-size 属 性 用 来 指定 字体 大 小 。 这 个 属性 允许 的 值 列 在 了 表 22-14 中 。 


表 22-14 font-size 属 性 的 值 
值 说 明 
es 设置 字体 大 小 。 浏 览 器 会 决定 每 个 值 代表 具体 大 小 。 不 过 ， 从 上 到 下 逐渐 增 大 是 有 保证 的 
small 
medium 
large 
x-large 
xx-large 
smaller 设置 字体 相对 于 父 元 素 字 体 的 大 小 
larger 


length» 使 用 CSS 长 度 值 精确 设置 字体 大 小 
<*> 将 字体 大 小 表示 为 父 元 素 字 体 大 小 的 百分数 









































代码 清单 22-11 展 示 了 font-size 属 性 的 用 法 。 
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代码 清单 22-11 使 用 font-size 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
p { 
padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
margin: 2px; 
float: left; 
font-family: sans-serif; 
font-size: medium; 





} 
#first { 

font-size: xx-large; 
} 


#second { 
font-size: larger; 
} 


</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="first">banana</span> alone. By the time we add the 
countless types of <span id="second">apples, oranges, and other 
well-known fruit, we are faced with thousands of choices</span>. 
</p> 
</body> 
</html> 


在 这 个 例子 中 ， 我 应 用 了 三 种 字体 大 小 声明 。 它 们 在 浏览 器 中 的 呈现 效果 如 图 22-11 所 示 。 
国 Example \ a i | 
|e Q | O titan/listings/example.htm iX 








| | There are lots of different kinds of fruit - there are over 500 
varieties of banana alone. By the time we add the 


countless types of apples, oranges, and other well- | 
known fruit, we are faced with thousands of choices. 




















图 22-11 使 用 font-size 属 性 
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224.3 ”设置 字体 样式 和 粗细 


可 以 使 用 font-weight 属 性 设置 字体 粗细 增加 字体 “重量 ”会 使 文本 更 粗 , font-style 
属性 允许 我 们 在 正常 字体 、 和 斜体 和 假 斜 体 ( 倾斜 字体 ) 三 种 字体 之 间 选 择 。 和 斜体 和 假 斜 体 
有 明显 区 别 , 但 这 是 技术 上 的 , 通常 从 文本 外 观看 来 差别 很 小 。 代 码 清单 22-12 展 示 了 这 两 个 























代码 清单 22-12 ”使 用 font-weight 和 font-style 属 性 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pi 
padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
margin: 2px; 
float: left; 
font-family: sans-serif; 
font-size: medium; 
} 
#first { 
font-weight: bold; 
} 
#second { 
font-style: italic; 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="first">banana</span> alone. By the time we add the 
countless types of <span id="second">apples, oranges, and other 
well-known fruit, we are faced with thousands of choices</span>. 
</p> 
</body> 
</html> 

















这 两 个 属性 的 呈现 效果 如 图 22-12 所 示 。 


22.5 使 用 Web 字体 473 


r 一 一 一 
__ Em l-lok 
J By Example x Was 


€ C. |Q titan/listings/example.html wy A 2m 


| There are lots of different kinds of fruit - there are over 500 
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types of apples, oranges, and other well-known fruit, we are 
faced with thousands of choices. 
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图 22-12 ”使 用 font-weight 和 font-style 属 性 














22.5 ”使 用 Web 字体 


我 之 前 提 到 过 CSS 字 体 的 一 大 问题 : 不 能 指望 用 户 的 机 器 上 一 定安 装 了 你 想 使 用 的 字体 。 解 
决 这 个 问题 的 方法 是 使 用 Web 字 体 ， 我 们 可 以 直接 下 载 Web 字 体 并 使 用 在 自己 的 页 面 上 ， 而 不 需 
要 用 户 做 什么 。 使 用 @font-face 指 定 Web 字 体 ， 如 代码 清单 22-13 所 示 。 


代码 清单 22-13 ”使 用 Web 字 体 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
Qfont-face ( 
font-family: 'MyFont'; 
font-style: normal; 
font-weight: normal; 
src: url('http://titan/listings/MyFont.woff'); 











} 
p { 
padding: 5px; 
border: medium double black; 
background-color: lightgrey; 
margin: 2px; 
float: left; 
font-size: medium; 
font-family: MyFont, cursive; 
} 
#first { 
font-weight: bold; 
} 


#second { 
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font-style: italic; 


</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="first">banana</span> alone. By the time we add the 
countless types of <span id="second">apples, oranges, and other 
well-known fruit, we are faced with thousands of choices</span>. 
</p> 
</body> 
</html> 


使 用 @font-face 的 时 候 , 需要 使 用 标准 字体 属性 来 描述 正在 使 用 的 字体 。font-family 属 性 定 
义 字体 名 称 ， 用 来 引用 要 下 载 的 字体 ; font-style 和 font-weight 属 性 告诉 浏览 器 如 何 设置 Web 字 
体 的 样式 和 粗细 , 也 就 是 说 你 可 以 创建 斜体 和 粗 体 字符 ; src 属 性 用 来 指定 字体 文件 的 位 置 。Web 
字体 有 多 种 格式 ,但 WOFF 格 式 得 到 了 最 为 广泛 的 支持 和 应 用 。 


























提示 一 些 Web 服 务 器 默认 情况 下 不 向 浏览 器 发 送 字 体 文件 。 你 可 能 需要 为 服务 器 配置 添加 文 
件 类 型 或 者 MIME 类 型 。 


上 述 代 码 中 的 Web 字 体 设 置 效 果 如 图 22-13 所 示 。 
pee Erm) 
j A] Example x E 
| € C | O titan/listings/example.html wtf | 














There Ave lots of different Kinds of vuit - 
there are over 500 varieties of banana Alone. By 


the time we Add the countless types of apples, 
oranges, and other well-known fruit, we ave 
faced with thousands of choices. 






































图 22-13 ”使 用 Web 字 体 























有 大 量 Web 字 体 资源 可 用 。 我 的 最 爱 是 谷歌 的 字体 网 站 ,www.google.com/webfonts 上 列 出 了 
他 们 出 售 的 字体 ， 也 有 如 何在 你 的 HTML 文 档 中 使 用 这 些 字体 的 操作 指南 。 
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22.6 iz 


本 章 我 们 学 习 了 设置 文本 样式 的 CSS 属 性 : 从 最 简单 的 文本 对 齐 到 复杂 的 自 定义 字体 和 创建 Cum 
文本 阴影 。 这 一 块 是 CSS 中 另 一 个 多 变 的 部 分 。 很 多 提案 给 出 了 非常 有 趣 的 属性 建议 ， 都 是 为 了 
更 好 地 控制 文本 的 外 观 。 但 尚 不 清楚 人 们 是 否 有 足够 的 兴趣 采纳 这 些 提 案 , 它们 无 法 成 为 标准 也 
是 完全 有 可 能 的 。 




















过 渡 、 动 画 和 变换 











本 童 介绍 三 种 为 HTML 文 档 应 用 简单 特殊 效果 的 方式 : 过 渡 、 动 画 和 变换 。 本 章 稍 后 会 逐一 





解释 并 演示 这 三 种 方式 。 这 三 种 特性 都 是 在 CSS3 中 新 添加 的 ， 在 本 书 撰写 之 时 ， 还 只 能 使 用 带 
厂商 前 级 的 属性 。 我 预料 这 种 情况 很 快 就 会 改变 ， 因 为 Web 设 计 师 和 开发 人 员 肯 定 会 非常 喜欢 这 


些 特性 。 

为 HTML 元 素 应 用 某 种 效果 的 想法 并 不 新 鲜 , 大 多 数 比 较 完 善 的 JavaScript 库 至 少 包含 几 种 目 
前 已 经 融入 CSS3 的 效果 。 通 过 JavaScript 操 作 CSS3 的 优势 是 性 能 。 许 多 新 功能 涉及 随 着 时 间 改 变 
CSS 属 性 的 值 ， 这 类 操作 可 以 直接 由 浏览 器 引 敬 处 理 ， 还 能 节省 开销 。 尽 管 如 此 ， 这 些 效果 CH 
使 是 最 基本 的 效果 ) 会 耗费 大 量 处 理 能 力 ， 尤 其 是 在 一 些 复杂 的 Web 页 面 上 。 出 于 这 个 原因 ， 应 
当 谨 慎 使 用 本 章 介 绍 的 效果 。 把 用 户 的 电脑 搞 得 越 来 越 慢 、 最 后 死机 , 可 不 是 什么 受 欢迎 的 事 儿 ， 
尤其 是 你 只 是 想 炫 次 一 下 自己 的 动画 技巧 ， 整 出 一 些 绣花 枕头 式 的 功能 就 更 不 可 取 。 

不 能 频繁 使 用 这 些 效果 的 另外 一 个 原因 是 它们 会 严重 分 散 注意 力 , LSB PLA. 使 用 这 些 效 
果 去 增强 用 户 要 在 页 面 上 执行 的 任务 , 不 管 具体 任务 是 什么 , 而 不 要 把 这 些 效果 应 用 到 不 属于 任 
务 核心 的 元 素 上 。 表 23-1 是 本 章 内 容 的 一 个 总 结 。 


表 23-1 本章 内 容 概要 











































































































































































































问 RE 解决 方案 代码 清单 
创建 简单 的 过 渡 更 用 transition-delay 、transition-property 、transition-duration 属 性 , 或 者 ”23-1、 23-2 
transition 简 写 属 性 
创建 反 向 过 渡 在 基本 样式 中 为 元 素 定义 反 向 过 渡 23-3 
指定 过 渡 期 间 如 何 计 ”使 用 transition-timing-function 属 性 23-4 
算 中 间 属 性 值 
创建 简单 的 动画 si Fanimation-delay, animation-duration, animation-iteration-count#llanimation- 23-5 
name 属 性 ，animation-name 的 值 必须 与 6keyframes 定 义 的 一 组 关键 帧 对 应 
设置 动画 的 初始 状态 为 ekeyframes 声 明 添加 fron 子 句 23-6 
为 动画 指定 中 间 关 键 帧 ”为 ekeyframes 声 明 添加 子 句 ， 使 用 子 句 的 名 称 指定 关键 帧 从 属 的 动画 的 百分点 23-7 
痢 定 动画 重复 播放 时 ”使 用 animation-direction 属 性 23-8 
的 播放 方向 
维持 动画 的 最 终 状 态 动画 结束 时 会 返回 初始 状态 ， 考 虑 使 用 变换 蔡 代 23-9 
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CER) 
问 — 8 解决 方案 代码 清单 

在 初始 页 面 布局 中 应 用 ”在 应 用 到 元 素 的 基本 状态 的 样式 设置 中 包含 动画 属性 23-10 

动画 

重用 关键 帧 创建 包含 animation-name 属 性 的 多 个 样式 ,属性 的 值 为 同一 个 ekeyframes 声 明 — 23-11 

为 一 个 元 素 应 用 多 个 动画 ”指定 多 个 ekeyframes 声 明 作为 animation-name 属 性 的 值 23-12, 23-13 
暂停 和 重新 开始 动画 使 用 animation-play-state 属 性 23-14 

为 元 素 应 用 变换 使 用 transform 属 性 23-15 

指定 变换 的 起 点 使 用 transform-origin 属 性 23-16 

设置 变换 的 动画 或 过 渡 在 @keyframes 声 明 或 过 渡 样 式 中 包含 transform 属 性 23-17 

















23.1 ”使 用 过 渡 


过 渡 效 果 一 般 是 由 浏览 器 直接 改变 元 素 的 CSS 属 性 实现 的 。 例 如 ， 如 果 使 用 :hover 选 择 器 ， 
一 旦 用 户 将 鼠标 悬 停 在 元 素 之 上 , 浏览 器 就 会 应 用 跟 选 择 器 关联 的 属性 。 代 码 清 单 23-1 给 出 了 一 
个 示例 。 


代码 清单 23-1 直接 应 用 新 的 属 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
p t 









































性 值 


padding: 5px; 

border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
#banana { 

font-size: large; 

border: medium solid black; 
} 


#banana:hover { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 

} 

</style> 
</head> 
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<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="banana">banana</span> alone. By the time we add the 
countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


在 这 个 例子 中 ， 我 为 一 个 span 元 素 定义 了 两 种 样式 。 一 种 通用 样式 〈 选 择 器 #jpanana )， 一 种 
样式 只 有 在 用 户 将 鼠标 悬 停 到 元 素 上 的 时 候 才 应 用 Cibanana: hoveriefems )。 














提示 “这 个 例子 中 使 用 了 color 属 性 ， 关 于 color 属 性 的 更 多 信息 请 参见 第 24 章 。 














当 用 户 将 鼠标 悬 停 在 span 元 素 上 的 时 候 ， 浏 览 吉 就 会 响应 ， 直 接应 用 新 的 属性 值 。 变 化 如 
图 23-1 所 示 。 


r 















Example Y cis 


€ > © Otitan/listings/exar 





ie: 1e E5112] alone. By the time we add the 
countless types of apples, oranges, and other well-known 
fruit, we are faced with thousands of choices. 






apples 
fruit, we are faced with housa d 























图 23-1 改变 CSS 属 性 值 的 直接 应 用 


CSS 过 渡 特 性 允许 我 们 控制 应 用 新 属性 值 的 速度 。 比 如 你 可 以 选择 逐渐 改变 示例 中 span 元 素 
的 外 观 ， 让 鼠标 移 到 单词 banana 上 的 效果 更 和 谐 。 表 23-2 列 出 了 能 实现 类 似 效 果 的 属性 。 


表 23-2 ”过 渡 属 性 










































































属 性 说 明 值 
transition-delay 指定 过 渡 开 始 之 前 的 延迟 时 间 < 时 间 > 
transition-duration 指定 过 渡 的 持续 时 间 < 时 间 > 
transition-property 此 定 应 用 过 渡 的 属性 < 字符 串 > 
transition-timing-function 间 定 过 渡 期 间 计算 中 间 值 的 方式 参见 代码 清单 23-4 
transition 在 一 条 声明 中 指定 所 有 过 渡 细 节 的 简写 属性 参见 代码 清单 23-2 











transition-delay 和 transition-duration 属 性 指定 为 CSS 时 间 ， 是 一 个 数字 ， 单 位 为 ms (XE 
秒 ) Ms (PP). 
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transition 简 写 属性 的 格式 如 下 : 


transition: <transition-property> <transition-duration> <transition-timing-function> 
<transition-delay> 


代码 清单 23-2 展 示 了 如 何 为 示例 HTML 文 档 应 用 过 渡 。 在 本 书 撰写 过 程 中 ， 主 流 洲 
不 能 直接 支持 过 渡 属 性 , 不 过 , 除了 IE， 所 有 浏览 如 都 可 以 使 用 厂商 前 级 实现 这 些 属性 
的 代码 清单 中 我 使 用 了 -webkit 前 组 

















注意 主流 浏览 器 也 都 没有 使 用 标准 属性 实现 动画 特性 。 跟 过 渡 一 样 ， 除 了 IE， 各 大 浏览 器 


| 5,25 


也 都 使 用 厂商 前 级 实现 了 动画 属性 。 ee i de 
是 说 这 个 例子 是 针对 Safari 和 Chrome 的 。 如 果 你 想 用 Firefox 和 Opera 尝 试 这 个 例子 , 很 


简单 ， 用 -moz 或 者 -0 替换 -webkit 即 可 。 这 是 CSS3 新 增 的 另 一 块 内 容 ， 和 希望 它 能 赶紧 
完全 实现 。 


代码 清单 23-2 使 用 过 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 


<link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
<style> 


p { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 





} 
#banana { 

font-size: large; 

border: medium solid black; 
} 


#banana:hover { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 
-webkit-transition-delay: 100ms; 
-webkit-transition-property: background-color, color, padding, 
font-size, border; 
-webkit-transition-duration: 500ms; 
} 
</style> 
</head> 
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<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="banana">banana</span> alone. By the time we add the 
countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


在 这 个 例子 中 ， 我 为 样式 添加 了 过 渡 ， 是 通过 #banana:hover 选 择 需 应 用 的 。 过 湾 会 在 用 户 
将 鼠标 悬 停 在 span 元 素 上 100ms 之 后 开始 ， 持 续 时 间 为 900ms ， 过 渡 应 用 到 background-color、 
color, 、padding、font-size 和 border 属 性 。 图 23-2 展 示 了 这 个 过 渡 的 渐进 过 程 。 


r 





























j B Example 
p 


PEELE alone. B 


oranges, and other well- 
choices. 














图 23-2 ”过 渡 的 渐进 应 用 


注意 这 个 示例 中 指定 多 个 属性 的 方式 。 过 渡 属 性 的 值 用 逗号 隔 开 , 这 样 过 渡 效 果 才 会 同时 出 
现 。 可 以 为 延迟 时 间 和 持续 时 间 指 定 多 个 值 , 它 代 表 的 意思 是 不 同 的 属性 在 不 同 的 时 间 点 开始 过 
渡 ， 且 持续 时 间 也 不 同 。 


23.1.1 创建 反 向 过 渡 


过 渡 只 有 在 应 用 与 其 关联 的 样式 时 才 会 生效 。 示 例 样式 中 使 用 了 :hover 选 择 器 ， 这 意味 着 只 
有 用 户 将 鼠标 悬 停 在 span 元 素 上 才 会 应 用 样式 。 用 户 一 旦 将 鼠标 从 span 元 素 上 移 开 ， 只 剩 下 
#banana 样 式 ， 默 认 情 况 下 ， 元 素 的 外 观 会 立刻 回 到 初始 状态 。 
因为 这 个 原因 , 大 多 数 过 渡 成 对 出 现 : 暂时 状态 的 过 渡 和 方向 相反 的 反 向 过 渡 。 代 码 清单 23-3 
展示 了 如 何 通 过 应 用 另 一 种 过 渡 样 式 平滑 地 返回 初始 样式 。 


代码 清单 23-3 ”创建 男 一 种 过 渡 


<!DOCTYPE HTML> 
<html> 
<head> 

<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
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p { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
#banana { 
font-size: large; 
border: medium solid black; 
-webkit-transition-delay: 10ms; 
-webkit-transition-duration: 250ms; 
} 


#banana:hover { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 
-webkit-transition-delay: 100ms; 
-webkit-transition-property: background-color, color, padding, 

font-size, border; 

-webkit-transition-duration: 500ms; 





} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="banana">banana</span> alone. By the time we add the 
countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


这 个 例子 中 我 省 略 了 transition-property 属 性 , 这 样 所 有 的 属性 都 会 在 整个 持续 时 间 内 逐渐 
应 用 过 渡 。 我 还 指定 了 初始 10ms 的 延迟 ， 以 及 250ms 的 持续 时 间 。 添 加 一 个 反 向 过 渡 后 ， 返 回 初 
始 状态 看 上 去 就 没 那么 突 元 了 。 








提示 “ 刚 开 始 布局 页 面 时 浏览 器 不 会 应 用 过 渡 。 这 意味 着 HTML 文档 一 开始 显示 时 就 会 直接 应 
用 #banana 样 式 ， 之 后 才 会 通过 过 渡 来 应 用 新 样式 。 














23.1.2 ”选择 中 间 值 的 计算 方式 


使 用 过 渡 时 ， 浏览 器 需要 为 每 个 属性 计算 初始 值 和 最 终 值 之 间 的 中 间 值 。 使 用 
transition-timing-function 属 性 指定 计算 中 间 值 的 方式 , 表示 为 四 个 点 控制 的 三 次 贝 塞 尔 曲线 。 
有 五 种 预 设 曲线 可 以 选择 ， 由 下 面 的 值 表示 : 
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O ease (默认 值 ) 
口 linear 
口 ease-in 


口 ease-out 





口 ease-in-out 


从 图 23-3 可 以 看 到 这 五 种 曲线 ， 它 们 展示 了 中 间 值 随 着 时 间 的 推移 变 为 最 终 值 的 速率 。 


Witt 


ease ease-in ease-out ease-in-out linear 
图 23-3” 调 速 函 数 曲 线 


搞 清楚 这 些 值 最 简单 的 办 法 就 是 在 自己 的 HTMIL 文 档 中 试验 。 还 有 另外 一 个 值 cubic-bezier， 
可 用 来 指定 自 定义 曲线 。 不 过 , 我 的 体会 是 过 渡 没 那么 平滑 ,缺乏 粒度 破坏 了 大 多 数值 ， 这 同时 
也 导致 指定 自 定 义 曲线 基本 上 毫 无 意义 。 和 希望 实现 能 在 最 终 的 标准 中 得 以 集中 改善 。 代 码 清 
单 23-4 展 示 了 transition-timing-function 属 性 的 应 用 。 






































代码 清单 23-4 ”使 用 transition-timing-function 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pt 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
#banana { 
font-size: large; 
border: medium solid black; 
-webkit-transition-delay: 10ms; 
-webkit-transition-duration: 250ms; 
} 


#banana:hover { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
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padding: 4px; 
-webkit-transition-delay: 100ms; 
-webkit-transition-property: background-color, color, padding, 
font-size, border; 
-webkit-transition-duration: 500ms; 
-webkit-transition-timing-function: linear; 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="banana">banana</span> alone. By the time we add the 
countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


这 里 我 选择 了 linear， 个 人 感觉 它 是 过 渡 效 果 最 为 流畅 的 一 个 值 。 
23.2 ”使 用 动画 


CSS 动 画 本 质 上 是 增强 的 过 渡 。 在 如 何 从 一 种 CSS 样 式 过 渡 到 男 一 种 样式 的 过 程 中 ,你 具有 
了 更 多 选择 、 更 多 控制 ， 以 及 更 多 灵活 性 。 表 23-3 列 出 了 动画 属性 。 


表 23-3 ”动画 属性 
























































属 性 说 Hj 值 
animation-delay 设置 动画 开始 前 的 延迟 < 时 间 > 
animation-direction 设置 动画 循环 播放 的 时 候 是 否 反 向 播放 normal 

alternate 
animation-duration 设置 动画 播放 的 持续 时 间 < 时 间 > 
animation-iteration-count 设置 动画 的 播放 次 数 infinite 

< 数值 > 
animation-name 指定 动画 名 称 none 

< FH B> 
animation-play-state 允许 动画 和 暂停 和 重新 播放 running 

paused 
animation-timing-function Ba ns PE prep aii, Xe tt gp 23.135 as 

inear 

ease-in 

ease-out 

ease-in-out 

cubic-bezier 
animation 简写 属性 参见 下 面 的 解释 











animation 人 简写 属性 的 格式 如 下 : 


animation: <animation-name> <animation-duration> <animation-timing-function> 
<animation-delay> <animation-iteration-count> 
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属性 都 不 是 用 来 指定 要 作为 动画 的 CSS 属 性 的 。 这 是 因为 动画 是 在 两 部 分 定义 的 。 








第 一 部 分 包含 在 样式 声明 中 ,使 用 表 23-3 列 出 的 属性 。 它 们 定义 了 动画 的 样式 , 但 并 没有 定义 哪 





些 属性 是 动画 。 














第 二 部 分 使 用 @key-frames 规 则 创建 ,用 来 定义 应 用 动画 的 属性 。 从 代码 清单 23-5 





中 可 以 看 到 定义 动画 的 这 两 部 分 。 





代码 清单 23-5 


创建 动画 


<!DOCTYPE HTML> 


<html> 
<head> 


<title>Example</title> 

<meta name="author" content="Adam Freeman"/> 

«meta name-"description" content-"A simple example"/» 

«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 


«/st 
«/head» 
«body» 

«p» 


</p> 


p { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
#banana { 

font-size: large; 

border: medium solid black; 
} 


#banana:hover { 
-webkit-animation-delay: 100ms; 
-webkit-animation-duration: 500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'GrowShrink'; 


} 


@-webkit-keyframes GrowShrink { 
to ( 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 


} 
yle> 


There are lots of different kinds of fruit - there are over 500 

varieties of «span id-"banana"»banana«/span» alone. By the time we add the 
countless types of apples, oranges, and other 

well-known fruit, we are faced with thousands of choices. 
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</body> 
</html> 


要 明白 我 们 在 这 个 示例 中 做 了 什么 , 你 应 该 仔细 研究 一 下 动画 的 两 部 分 。 第 一 部 分 是 在 样式 
中 定义 动画 属性 , 是 跟 #banana:hover 选 择 带 一 起 的 ,我 们 先 看 看 基本 属性 : 选择 器 样式 应 用 100ms 
后 开始 播放 动画 ， 持 续 时 间 500ms， 无 限 重复 播放 ， 中 间 值 使 用 linear 函 数 计算 。 除 了 重复 播放 
动画 ， 这 些 属 性 在 过 渡 中 都 有 对 应 属性 。 

这 些 基 本 的 属性 并 没有 指出 为 哪些 CSS 属 性 应 用 动画 。 为 此 ， 要 使 用 animation-name 属 性 给 
动画 属性 起 个 名 字 ， 这 里 叫 GrowShrink。 这 样 ， 就 相当 于 告诉 浏览 器 找 一 组 名 为 CrowShrink 的 关 
键 帧 ， 然 后 将 这 些 基本 属性 的 值 应 用 到 @keyframes 指 定 的 动画 属性 上 。 下 面 是 代码 清单 中 关键 帧 
的 声明 ( 我 省 略 了 -webkit 前 级 ): 

@keyframes GrowShrink { 

to { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 


padding: 4px; 
} 



































} 

声明 的 开始 是 @keyframes ， 接 着 指定 了 这 组 关键 帧 的 名 字 Growshrink。 声 明 内 部 指定 了 一 组 
要 应 用 动画 效果 的 属性 。 这 里 在 一 个 to 声明 中 指定 了 五 个 属性 及 其 值 。 这 是 关键 帧 设置 最 简单 的 
类 型 ,to 声明 定义 了 一 组 设置 动画 样式 的 属性 , 同时 也 定义 了 动画 结束 时 这 些 属性 的 最 终 值 。( 稍 
后 会 向 你 展示 更 复杂 的 关键 帧 。) 动画 的 初始 值 来 自 进行 动画 处 理 的 元 素 在 应 用 样式 之 前 的 属 
性 值 。 

代码 清单 中 的 动画 跟 本 章 之 前 为 过 渡 应 用 的 示例 相同 , 在 浏览 器 中 查看 HTML 文 档 并 日 将 鼠 


































































































标 悬 停 在 span 元 素 上 后 ,效果 甚至 也 看 起 来 差不多 。 最 起 码 刚 开 始 看 起 来 是 完全 一 样 的 ， 然 后 动 
画 不 断 重 复 ， 这 是 第 一 点 不 同 。span 元 素 变 大 ， 达 到 最 大 值 ， 然 后 返回 初始 值 ， 这 时 动画 重新 开 


始 ， 效 果 如 图 23-4 所 示 。 











, Example 
€ c 


j By Example 
|e»c 























图 23-4 ”动画 中 的 重复 状态 
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23.2.1 使 用 关键 由 


CSS 动 画 的 关键 帧 极其 灵活 ， 非 常 值得 研究 。 在 接 下 来 的 几 节 中 ， 为 创建 更 复杂 的 效果 ,我 
会 介绍 几 种 表示 关键 帧 的 方法 。 

1. 设置 初始 状态 

在 前 面 的 示例 中 ,要 处 理 为 动画 的 属性 的 初始 值 来 自 元 素 自 身 。 你 可 以 使 用 from 子 句 指定 另 
一 组 初始 值 ， 如 代码 清单 23-6 所 示 。 


代码 清单 23-6 ”指定 男 一 组 初始 值 

















<style> 

pt 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 

} 

#banana { 
font-size: large; 
border: medium solid black; 


#banana:hover { 
-webkit-animation-delay: 100ms; 
-webkit-animation-duration: 250ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'GrowShrink' ; 


} 





@-webkit-keyframes GrowShrink { 
from { 
font-size: xx-small; 
background-color: red; 


to ( 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 

} 


</style> 











在 这 个 例子 中 , 我 为 font-size 和 background-color 属 性 提供 了 初始 值 ， 在 to 子 句 中 指定 的 其 
他 属性 在 动画 开始 时 的 初始 值 来 自 元 素 自身 。 新 子 句 的 效果 如 图 23-5 所 示 。 动 画 开 始 时 ， 文 本 大 
小 和 span 元 素 的 背景 颜色 变 为 from 子 句 中 指定 的 初始 值 。 
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123-5 
2. 指定 中 间 关 键 帧 


也 可 以 添加 其 他 关键 帧 定义 动画 的 中 间 阶 段 。 这 是 通过 添加 百分数 子 句 实现 的 , 如 代码 清单 


23-7 所 示 。 


代码 清单 23-7 添加 中 间 关 键 帧 


<style> 

Pt 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 

} 

#banana { 
font-size: large; 
border: medium solid black; 


} 


#banana:hover { 





在 from 子 句 中 设置 初始 状态 


-webkit-animation-delay: 100ms; 
-webkit-animation-duration: 2500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'GrowShrink'; 


} 


@-webkit-keyframes GrowShrink { 
from { 
font-size: xx-small; 
background-color: red; 


} 


50% { 
background-color: yellow; 
padding: 1px; 

} 


75% { 
color: white; 





A88 第 BF WHR. ABPRR 





padding: 2px; 


to { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
padding: 4px; 

} 


</style> 








对 于 每 一 个 百分数 子 句 , 你 在 动画 中 定义 了 一 个 点 , 这 时 子 句 中 指定 的 属性 和 值 会 完全 应 用 
到 样式 上 。 在 这 个 例子 中 ， 我 定义 了 50% 和 75% 子 句 。 

中 间 关 键 帧 有 两 个 用 途 。 一 是 为 属性 定义 新 的 变化 速率 。padding 属 性 的 设置 就 是 从 这 个 角 
度 出 发 的 。 在 中 间 点 ( 由 50% 子 名 定义 ), 动画 元 素 的 内 边 距 是 1px; 在 75% 处 ， 内 边 距 是 2px; 而 
在 动画 结束 的 时 候 ， 内 边 距 被 设置 为 4px。 浏 览 器 会 使 用 animation-timing-function 属 性 指定 的 
调 速 函数 计算 由 一 个 关键 帧 移动 到 下 一 个 关键 帧 需要 的 中 间 值 , 以 确保 关键 帧 与 关键 帧 之 间 流 畅 
地 播放 。 























提示 。 如果 你 自己 有 所 偏好 , 也 可 以 分 别 使 用 0% 和 100% 代 替 from 和 to 子 句 定 义 开 始 关键 帧 和 结 
til s 








中 间 关 键 帧 的 男 一 个 用 途 是 定义 属性 值 ， 以 便 创建 更 为 复杂 的 动画 。background-color 属 性 
的 设置 就 是 从 这 个 角度 出 发 的 ,初始 值 ( red ) 在 from 子 句 中 定义 , 在 50% 处 , 这 个 值 会 变 成 yellow， 
而 在 动画 结束 时 ， 它 又 会 成 为 green。 通 过 添加 非 序 列 化 的 中 间 值 ， 我 在 一 个 动画 中 创建 了 两 个 
颜色 过 渡 : 由 红色 到 黄色 ,由 黄色 到 绿色 。 注 意 ,我 没有 在 75% 子 句 中 设置 颜色 的 中 间 值 ， 因 为 
不 必 给 每 个 关键 帧 都 设置 值 。 新 关键 帧 的 效果 如 图 23-6 所 示 。 
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图 23-6 ”添加 中 间 关 键 帧 





23.22 ”设置 重复 方向 


动画 结束 后 浏览 器 可 以 选择 接 下 来 动画 以 何 种 方式 重复 ,使 用 animation-direction 属 性 指定 
首选 方式 ， 表 23-4 列 出 了 这 个 属性 允许 的 值 。 
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表 23-4 animation-direction 属 性 的 值 

















值 说 明 
normal 每 次 重复 都 向 前 播放 ， 如 果 可 重复 播放 多 次 ， 每 次 动画 都 恢复 初始 状态 ， 从 头 开始 播放 
alternate 动画 先 向 前 播放 ， 然 后 反方 向 播放 ， 相 当 于 animation-iteration-count 属 性 的 值 为 2 





代码 清单 23-8 展 示 了 animation-direction 属 性 的 用 法 。 
代码 清单 23-8 使 用 animation-direction 属 性 


<style> 
p { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
#banana { 

font-size: large; 

border: medium solid black; 
} 


#banana:hover { 
-webkit-animation-delay: 100ms; 
-webkit-animation-duration: 250ms; 
-webkit-animation-iteration-count: 2; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'GrowShrink'; 
-webkit-animation-direction: alternate; 


} 


@-webkit-keyframes GrowShrink { 
to { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
padding: 4px; 


} 

</style> 

在 这 个 例子 中 , REH T animation-iteration-count/& PETS e 5) im Be e PX. BAKE 
代 结 束 后 ， 动 画 元 素 就 回 到 初始 状态 。 我 为 animation-direction 属 性 使 用 了 alternate 值 ， 动 画 
就 会 首先 向 前 播放 ， 之 后 反方 向 播放 。 效 果 如 图 23-7 所 示 。 

如 果 将 animation-iteration-count 属 性 的 值 设 为 infinite, 那 么 只 要 鼠标 悬 停 在 span 元 素 上 ， 
动画 就 无 休止 地 向 前 和 向 后 交替 播放 。 

normal 值 则 会 让 动画 回 到 初始 状态 ， 每 次 重复 播放 都 是 向 前 播放 。 效 果 如 图 23-8 所 示 。 
























































图 23-7 将 动画 的 animation-direction 属 性 设 为 alternate 
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图 23-8 ”将 动画 的 anima 


23.2.3 ”理解 结束 状态 





CSS 动 画 的 一 个 局 限 是 关键 帧 为 属性 定义 的 值 只 能 在 动画 中 应 用 。 动 画 结 

















tion-direction 属 怕 


外 观 回 到 初始 状态 。 代 码 清 单 23-9 给 出 了 一 个 例子 。 


代码 清单 23-9 ”动画 结束 后 动画 状态 丢失 


<style> 
pt 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
#banana ( 

font-size: large; 

border: medium solid black; 
} 


#banana:hover { 
-webkit-animation-delay: 100ms; 
-webkit-animation-duration: 250ms; 


-webkit-animation-iteration-count: 1; 


FE 设 为 normal 





后 ,动画 元 素 的 


232 使 用 动画 491 





-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'GrowShrink'; 


} 


@-webkit-keyframes GrowShrink { 
to { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
padding: 4px; 





} 
</style> 


这 段 代码 制造 的 效果 如 图 23-9 所 示 。 即 使 鼠标 仍然 悬 停 在 span 元 素 上 ， 元 素 的 外 观 在 动画 结 
束 后 就 回 到 了 初始 状态 一 一 动画 状态 完全 消失 。 
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图 23-9 ”动画 结束 后 ， 元 素 恢复 初始 状态 
应 用 ， 并 没有 让 自身 出 现任 何 持久 变化 。 
如 果 你 想 让 元 素 的 外 观 保留 动画 结束 时 的 状态 ， 必 须 使 用 本 章 前 面 介绍 的 过 渡 。 








出 现 这 种 情况 的 原因 是 CSS 动 画 只 是 驱动 新 样式 的 应 


23.2.4 ”初始 布局 时 应 用 动画 

跟 过 渡 相 比 ， 动 画 的 一 个 优势 是 你 可 以 将 其 应 用 到 页 面 的 初始 布局 。 代 码 清单 23-10 给 出 了 
一 个 例子 。 
代码 清单 23-10 “在 页 面 初始 布局 时 为 元 素 应 用 动画 








<style> 
p { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 





#banana { 
font-size: large; 
border: medium solid black; 
-webkit-animation-duration: 2500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'ColorSwap'; 


} 


@-webkit-keyframes ColorSwap { 
to { 
border: medium solid white; 
background-color: green; 
} 


} 
</style> 




















在 这 个 例子 中 , 我 在 样式 的 #banana 选 择 器 中 定义 了 动画 。 页 面 一 旦 加 载 就 会 自动 应 用 样式 ， 





这 就 意味 着 浏览 器 一 旦 显示 HTML 就 有 了 动画 效果 。 








提示 使 用 上 述 方法 要 谨慎 。 如 果 要 在 页 面 中 使 用 动画 ， 而 动画 效果 不 是 邀请 用 户 执行 菜 一 动 
作 ， 这 种 情况 更 应 该 慎之 又 慎 。 如 果 确 实 要 使 用 动画 ， 要 保证 动画 效果 缓和 一 些 ， 不 要 


妨碍 用 户 阅 读 或 者 与 页 面 其 他 部 分 交互 。 


23.2.5 “重用 关键 帧 





我 们 可 以 对 同一 组 关键 帧 应 用 多 个 动画 ， 从 而 为 动画 属性 配置 不 同 的 值 。 代 码 清单 23-11 给 


出 了 一 个 示例 。 
代码 清单 23-11 在 多 个 动画 之 间 重 用 关键 帧 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 


<meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«style» 
p { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 


span { 
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font-size: large; 
border: medium solid black; 


} 


#banana { 
-webkit-animation-duration: 2500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'ColorSwap'; 


} 


#apple { 
-webkit-animation-duration: 500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: normal; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-name: 'ColorSwap'; 


} 


@-webkit-keyframes ColorSwap { 
to { 
border: medium solid white; 
background-color: green; 


} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="banana">banana</span> alone. By the time we add the 
countless types of <span id="apple">apples</span>, oranges, and other 
well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 


代码 清单 23-11 展 示 了 两 个 样式 ， 它 们 都 使 用 了 ColorSswap 关 键 帧 。 跟 扯 pple 选 择 器 关联 的 动画 会 
执行 一 小 段 时 间 ， 且 跟 如 anana 选 择 器 关联 的 动画 使 用 的 计时 函数 不 同 ， 不 过 两 者 都 是 向 前 播放 。 
23.2.6 ”为 多 个 元 素 应 用 多 个 动画 


前 面 例子 的 一 个 变 体 是 为 多 个 元 素 应 用 同一 个 动画 。 在 包含 动画 细节 的 样式 中 , 扩展 选择 器 
的 范围 即 可 实现 这 一 点 ， 如 代码 清单 23-12 所 示 。 


代码 清单 23-12 ”为 多 个 元 素 应 用 一 个 动画 
























































<style> 
pt 
padding: 5px; 
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border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
span { 

font-size: large; 

border: medium solid black; 
} 


#banana, #apple { 
-webkit-animation-duration: 2500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'ColorSwap'; 


} 


@-webkit-keyframes ColorSwap { 
to { 
border: medium solid white; 
background-color: green; 
} 


} 
</style> 


在 这 个 例子 中 , 文档 中 的 两 个 span 元 素 都 跟 选 择 器 匹配 ,因此 都 会 使 用 关键 


应 用 动画 ， 效 果 如 图 23-10 所 示 。 
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图 23-10 ”为 多 个 元 素 应 用 同一 个 动画 




















我 们 还 可 以 为 一 个 元 素 应 用 多 个 动画 ， 只 需 用 逗号 将 动画 属性 的 不 同 值 隔 开 即 可 。 代 码 清 





单 23-13 展 示 了 如 何 为 一 个 元 素 应 用 多 个 关键 帧 。 
代码 清单 23-13 ”为 一 个 元 素 应 用 多 个 关键 帧 


<style> 
pt 
padding: 5px; 
border: medium double black; 
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background-color: lightgray; 
font-family: sans-serif; 


} 
span { 

font-size: large; 

border: medium solid black; 
} 





#banana, #apple { 
-webkit-animation-duration: 1500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'ColorSwap', 'GrowShrink'; 


} 


@-webkit-keyframes ColorSwap { 
to { 
border: medium solid white; 
background-color: green; 


} 


@-webkit-keyframes GrowShrink { 
to { 
font-size: x-large; 
padding: 4px; 


</style> 








在 这 个 例子 中 ， 我 为 #banana 和 #apple 选 择 需 应 用 了 Colorswap 和 GTrowShrink 关 键 帧 ， 浏 览 器 
会 同时 应 用 两 个 关键 帧 。 





23.2.7 ”停止 和 启动 动画 


animation-play-state 属 性 可 以 用 来 停止 和 启动 动画 。 如 果 这 个 属性 的 值 为 paused， 动 画 就 
会 停止 。 如 果 换 成 playing， 动画 就 会 开始 播放 。 代 码 清 单 23-14 展 示 了 如 何 使 用 JavaScript 改 变 这 
个 属性 的 值 。 稍 后 在 本 书 第 四 部 分 ， 我 们 还 会 更 详细 地 解释 如 何在 类 似 情况 下 使 用 JavaScript。 


代码 清单 23-14 ”停止 和 启动 动画 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 




















<style> 
#fruittext { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 

#banana { 
-webkit-animation-duration: 2500ms; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-timing-function: linear; 
-webkit-animation-name: 'GrowShrink'; 

} 


@-webkit-keyframes GrowShrink { 
from { 
font-size: large; 
border: medium solid black; 


} 
to { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 
} 
} 
</style> 
</head> 
<body> 


«p id-"fruittext"» 
There are lots of different kinds of fruit - there are over 500 
varieties of «span id-"banana"»banana«/span» alone. By the time we add the 
countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of choices. 

</p> 

<p> 
<button>Running</button> 
<button>Paused</button> 

</p> 

<script> 
var buttons = document.getElementsByTagName("BUTTON") ; 
for (var i = 0; i < buttons.length; i++) { 

buttons[i].onclick = function(e) { 
document.getElementById("banana").style.webkitAnimationPlayState = 
e.target.innerHTML; 
Is 

} 

</script> 

</body> 
</html> 
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23.3 ”使 用 变换 
我 们 可 以 使 用 CSS 变 换 为 元 素 应 用 线性 变换 ， 也 就 是 说 你 可 以 旋转 、 缩 放 、 倾 斜 和 平移 某 个 























元 素 。 表 23-5 列 出 了 应 用 变换 使 用 的 属性 。 Em 
表 23-5 transform 属性 
属 性 说 明 值 
transform 指定 应 用 的 变换 功能 参见 表 23-6 
transform-origin 指定 变换 的 起 点 参见 表 23-7 





23.3.1 应 用 变换 


我 们 通过 transform 属 性 为 元 素 应 用 变换 。 这 个 属性 允许 的 值 是 一 组 预定 义 的 函数 , 如 表 23-6 
所 示 。 




















ni 














#223-6 transform 属性 的 值 
值 说 明 
translate(< 长 度 值 或 百分数 值 >) 在 水 平方 向 、 垂 直方 向 或 者 两 个 方向 上 平移 元 素 
translateX(< 长 度 值 或 百分数 值 >) 
translateY(< 长 度 值 或 百分数 值 >) 



















































































scale(< 数 值 >) 在 水 平方 向 、 垂 直方 向 或 者 两 个 方向 上 缩放 元 素 

scaleX(< 数 值 >) 

scaleY(< 数 值 >) 

rotate(< 角 度 >) 旋转 元 素 

skew(< 角 度 >) 在 水 平方 向 、 垂 直方 向 或 者 两 个 方向 上 使 元 素 倾斜 一 定 的 角度 

skewX(< 角 度 >) 

skewY(< 角 度 >) 

matrix(4~6 个 数值 ， 运 号 隔 开 ) 指定 自 定 义 变换 。 大 多 数 浏览 器 还 没有 实现 z 轴 缩放 ， 因 此 最 后 两 个 数字 可 以 











忽略 (有 些 情况 必须 要 省 略 ) 











代码 清单 23-15 是 一 个 变换 的 例子 。 跟 本 章 其 他 CSS 特 性 一 样 , 主流 浏览 器 还 没有 直接 实现 变 
换 。 代 码 清单 中 使 用 了 -moz 前 级 ， 因 为 Firefox 浏 览 器 算是 实现 最 完整 的 。 


代码 清单 23-15 ”为 元 素 应 用 变换 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
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<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
p { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
#banana { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 
-moz-transform: rotate(-45deg) scaleX(1.2); 
} 
</style> 
</head> 
<body> 


<p id="fruittext"> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="banana">banana</span> alone. By the time we add the 
countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of choices. 

</p> 

</body> 
</html> 


在 这 个 例子 中 ， 我 为 #banana 选 择 器 添加 了 一 个 transform 属 性 声明 ， 指 定 了 两 个 变换 。 第 一 
个 是 旋转 -45°( 即 逆 时 针 旋转 45° ); 第 二 个 是 沿 x 轴 进行 因子 为 12 的 缩放 。 这 些 变 换 的 效果 如 图 23-11 
所 示 。 











(a <ie ) 
B Example + - 
E kA a http://titan/listings/example.html -| Bir 


of different kinds of fruit - there are over 500 varieties of 


alone. By the time we add the countless types of apples, 

















图 23-11 旋转 和 缩放 元 素 


从 图 中 可 以 看 到 ， 元 素 按 照 指 定 方 式 进 行 了 旋转 和 放大 。 注 意 页 面 的 布局 并 没有 因此 改变 。 
元 素 变 换 后 覆盖 了 周围 的 一 些 内 容 。 


23.3.2 ”指定 元 素 变换 的 起 点 
transform-origin 属 性 允许 我 们 指定 应 用 变换 的 起 点 。 默 认 情 况 下 ， 使 用 元 素 的 中 心 作 为 起 











— 
| 
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点 ， 不 过 ， 你 可 以 使 用 表 23-7 中 的 值 选择 其 他 起 点 。 
表 23-7 transform-origin 属 性 的 值 











值 说 明 
<%> 指定 元 素 x 轴 或 者 y 轴 的 起 点 
< 长 度 值 > 指定 距离 
left 指定 x 轴 上 的 位 置 
center 
Right 
top 指定 y 轴 上 的 位 置 
center 
bottom 





要 定义 起 点 , 需要 为 x 轴 和 y 轴 各 定义 一 个 值 。 如 果 只 提供 一 个 值 ， 男 一 个 值 会 被 认为 是 中 心 
位 置 。 代 码 清单 23-16 展 示 了 transform-origin 属 性 的 用 法 。 


代码 清单 23-16 使 用 transform-origin 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
«title»Example«/title» 
«meta name-"author" content-"Adam Freeman"/» 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
p t 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 





} 


#banana { 


font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 
-moz-transform: rotate(-45deg) scaleX(1.2); 
-moz-transform-origin: right top; 
} 
</style> 
</head> 
<body> 
«p id-"fruittext"» 
There are lots of different kinds of fruit - there are over 500 
varieties of «span id-"banana"»banana«/span» alone. By the time we add the 
countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of choices. 
</p> 
</body> 
</html> 
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在 这 个 例子 中 ， 我 将 变换 的 起 点 移 到 了 元 素 的 右上 角 ， 从 图 23-12 中 可 以 看 到 效果 。 











—_ à 
er | EXIT 
国 Sample P |+ 7 

| 
D> | BY httpy/titaniistin le.html - Mtis 
€, | BB htpw/titanlistings/eramplehtm ži | 


There are lots of different kinds of fruit - there are over 500 varieties of 
[//3yne. By the time we add the countless types of apples, oranges, 


and oth K? «nown fruit, we are faced with thousands of choices. 


























图 23-12 ”指定 变换 的 起 点 


23.3.3 ”将 变换 作为 动画 和 过 渡 处 理 
我 们 可 以 为 变换 应 用 动画 和 过 渡 ， 就 跟 其 他 CSS 属 性 一 样 。 代 码 清单 23-17 展 示 了 一 个 例子 。 
代码 清单 23-17 ”为 变换 应 用 过 渡 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
«meta name="author" content-"Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 

pt 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 

} 

#banana { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
padding: 4px; 

} 

#banana:hover { 
-moz-transition-duration: 1.5s; 
-moz-transform: rotate(360deg); 

) 

«/style» 
«/head» 


«body» 
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«p id="fruittext"> 
There are lots of different kinds of fruit - there are over 500 
varieties of «span id="banana">banana</span> alone. By the time we add the 
countless types of apples, oranges, and other 
well-known fruit, we are faced with thousands of choices. 


</p> 
</html> 
在 这 个 例子 中 ， 我 定义 了 一 个 过 渡 ， 它 会 经 过 1.5 秒 钟 完成 一 次 360” 旋 转变 换 。 当 用 户 将 鼠标 
基 停 在 span 元 素 上 ， 就 会 应 用 过 渡 ， 效 果 如 图 23-13 所 示 。 
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图 23-13 ”结合 使 月 


过 渡 和 变换 


uu 








23.4 小结 


本 章 介绍 了 CSS3 的 三 个 新 特性 ， 使 用 这 些 特 性 可 以 对 元 素 外 观 进 行 各 种 各 样 的 设置 。 过 渡 、 
变换 和 动画 用 起 来 很 简单 , 能够 恰当 地 提升 体验 和 增加 灵活 性 。 我 建议 大 家 有 节制 地 使 用 这 些 特 
性 ,用 得 好 确实 能 改进 元 素 的 外 观 ， 并 能 从 整体 上 提升 网 页 和 应 用 的 用 户 体 验 。 本 章 所 有 的 示例 
都 使 用 了 浏览 器 特定 厂商 前 绥 的 属性 , 不 过 这 些 属 性 的 实现 已 经 相当 接近 标准 。 和 希望 浏览 器 很 快 
就 能 支持 标准 属性 。 

















第 24 章 
其 他 CSS 属 性 和 特性 








本 章 会 介绍 一 下 不 适宜 放 到 其 他 章节 的 CSS 属 性 。 这 些 属性 也 相当 重要 和 实用 ， 只 不 过 , 我 
没 办 法 将 它们 融和 人 其 他 章节 讲述 的 主题 。 本 章 我 们 就 来 看 看 如 何 设置 前 景色 和 元 素 的 透明 度 , 如 
何 为 HTML 表 格 和 列表 元 素 应 用 特殊 样式 。 表 24-1 是 本 章 内 容 的 一 个 总 结 。 


表 24-1 本章 内 容 概要 















































































































































问 sm 解决 方案 代码 清单 
设置 元 素 的 前 景色 使 用 color 属 性 24-1 
设置 元 素 的 透明 度 使 用 opacity 属 性 24-2 
指定 如 何 绘制 相 邻 表 格 单元 的 边框 使 用 border-collapse 和 border-spacing 属 性 24-3 ~ 24-5 
指定 表格 标题 的 位 置 使 用 caption-side 属 性 24-6 
指定 如 何 确定 表格 尺寸 使 用 table-layout 属 性 24-7 
指定 列表 标记 的 类 型 使 用 list-style-type 属 性 24-8 
将 图 像 作为 列表 标记 使 用 list-style-image 属 性 24-9 
指定 列表 标记 的 位 置 使 用 list-style-position 属 性 24-10 
指定 光标 的 形状 使 用 cursor 属 性 24-11 


























24.1 设置 元 素 的 颜色 和 透明 度 


在 本 书 的 这 一 部 分 ,我 们 看 到 了 CSS 颜 色 的 各 种 用 法 ,如 background-color 属 性 ,border-color 
属性 等 。 还 有 另外 两 个 与 颜色 有 关 的 属性 。 表 24-2 列 出 了 这 些 属性 。 


表 24-2 ”颜色 相关 属性 





























属 性 说 明 值 
color 设置 元 素 的 前 景色 < 颜色 > 
opacity 设置 颜色 的 透明 度 < 数值 > 


24.1.1 设置 前 景 


color 属 性 设置 元 素 的 前 景色 。 一 般 而 言 , 元 素 对 color 属 性 之 于 它 的 意义 可 以 有 不 同 的 解读 ， 
不 过 实际 上 ，color 属 性 一 般 用 来 设置 文本 的 颜色 。 代 码 清单 24-1 展 示 了 color 属 性 的 用 法 。 
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代码 清单 24-1 使 用 color 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
pt 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 





} 
#tbanana { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: rgba(255, 255, 255, 0.7); 


a:hover { 
color: red; 
} 


</style> 
</head> 
<body> 
<p id="fruittext"> 
There are lots of different kinds of fruit - there are over 500 
varieties of <span id="banana">banana</span> alone. By the time we add the 
countless types of apples, oranges, and other well-known fruit, we are faced 
with thousands of choices. 
<a href="http://en.wikipedia.org/wiki/Banana">Learn more about Bananas</a> 
</p> 
</body> 
</html> 


在 这 个 例子 中 ， 我 用 了 两 次 color 属 性 : 一 次 为 span 元 素 设 置 前 景色 和 透明 度 ， 一 次 设置 鼠 
标 悬 停 在 a 元 素 上 时 链接 的 前 景色 。 效 果 如 图 24-1 所 示 。 在 印刷 页 面 上 可 能 不 好 辨认 效果 ， 要 想 
看 清楚 可 以 在 浏览 器 中 显示 示例 HTML 文 档 。 
f Aram) 


/ Example 
€ 2 CŒ Otitan/listings/example.ht 

















| There are lots of different kinds of fruit - there are over 500 varieties of | 
eFTETIEI alone. By the time we add the countless types of apples, 


oranges, and other well-known fruit, we are faced with thousands of 
choices. Learn more about Bananas 




















图 24-1 ”使 用 color 属 性 设置 前 景色 
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24.1.2 ”设置 元 素 的 透明 度 


请 注意 ,我 在 前 面 的 例子 中 使 用 了 rgba 函 数 设 置 span 元 素 的 颜色 .通过 提供 一 个 小 于 1 的 alpha 





值 可 以 让 文本 变 透 明 。 从 图 24-1 中 可 能 看 不 出 来 , 但 实际 上 透明 意 





味 着 文本 允许 一 小 部 分 背景 色 








透 过 。 可 以 使 用 opacity 属 性 让 整个 元 素 和 文本 内 容 透明 。 这 个 
表 完 全 透明 ， 后 者 代表 完全 不 透明 。 代 码 清单 24-2 展 示 了 opacity 
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代码 清单 24-2 使 用 opacity 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
«meta name-"author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 





属性 的 取 值 范围 是 0 到 1 ， 前 者 代 
&TERS HE 


«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 


«style» 
p { 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 


} 
#banana { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: white; 
opacity: 0.4; 
} 
a:hover { 
color: red; 
} 
</style> 
</head> 
<body> 


<p id-"fruittext"» 
There are lots of different kinds of fruit - there are over 


500 


varieties of <span id-"banana"»banana«/span» alone. By the time we add the 
countless types of apples, oranges, and other well-known fruit, we are faced 


with thousands of choices. 


«a href-"http: //en.wikipedia.org/wiki/Banana"»Learn more about Bananas</a> 


</p> 
</body> 
</html> 


在 这 个 例子 中 ， 我 将 span 元 素 的 opacity 属 性 的 值 设 为 0.4。 效 果 如 
上 效果 可 能 不 是 太 明 显 。 


























图 24-2 所 示 ， 不 过 印 在 纸 
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f 1 - a RR RN Erm) 
y 国 Sample x Ave .i 
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€ > C Otitan/listings/example.htm! wtf | 


There are lots of different kinds of fruit - there are over 500 varieties 

of TiETE alone. By the time we add the countless types of d | 
apples, oranges, and other well-known fruit, we are faced with 
thousands of choices. Learn more about Bananas 




















图 24-2 ”设置 元 素 的 透明 度 





24.2 设置 表格 样式 


我 在 第 11 章 介绍 过 ， 有 不 少 属性 可 用 来 为 table 元 素 设 置 独特 样式 ， 表 24-3 总 结 了 这 些 忆 
表 24-3 ”表格 相关 属性 


s 
































属 性 说 明 值 
border-collapse 设置 相 邻 单元 格 的 边框 处 理 样 式 collapse 
separate 
border-spacing 设置 相 邻 单元 格 边框 的 间距 1~2 个 长 度 值 
caption-side 设置 表格 标题 的 位 置 top 
bottom 
empty-cells 设置 空 单元 格 是 否 显示 边框 ped 
show 
table-layout 指定 表格 的 布局 样式 auto 
fixed 





24.2.1 合并 表格 边框 
border-collapse 用 来 控制 table 元 素 相 邻 单元 格 边框 的 样式 ， 图 24-3 显 示 的 是 默认 处 理 样 式 。 


r | —Im ES P) 
/ By Example x War 


€ Q | Q titan/listings/example.htm! vy | A 














Results of the 2011 Fruit Survey 


Rank Name || Color [Size & Votes 
Favorite: [Apples |Green |Medium |500 | 


























图 24-3 ”表格 边框 的 默认 外 观 
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浏览 占 为 表格 绘制 了 一 个 边框 ,同时 还 为 每 个 单元 格 绘制 了 边框 , 显示 出 来 就 是 双边 








W 


























用 border-collapse 属 性 可 以 改变 这 种 效果 ， 如 代码 清单 24-3 所 示 。 


代码 清单 24-3 ”使 用 border-collapse 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 














«style» 
table ( 
border-collapse: collapse; 
} 
th, td { 
padding: 2px; 
</style> 
</head> 
<body> 


<table border="1"> 
<caption>Results of the 2011 Fruit Survey</caption> 
«colgroup id-"colgroupi"» 
«col id-"coliAnd2" span-"2"/» 
«col id="col3"/> 
</colgroup> 
<colgroup id="colgroup2" span="2"/> 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th> 
<th colspan="2">Size & Votes</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 
</tr> 
<tr> 
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td> 
<td>Large</td><td>450</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


collapse 值 告诉 浏览 器 不 要 为 相 邻 元 素 绘制 两 个 边框 ， 效 果 如 图 24-4 所 示 。 
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[ aram) 
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J 贺 Example ‘ Xe 
€ Œ |Q titan/listings/example.htm! yy | A, 














Results of the 2011 Fruit Survey 
Color | Size & Votes 
Favorite: Apples Green Medium |500 








2nd Favorite: Oranges (Orange \Large 450 
© 2011 Adam Freeman Fruit Data Enterprises 



































图 24-4 ”合并 表格 中 的 边框 








24.22 ”配置 独立 边框 


如 果 你 一 定 要 为 border-collapse 属 性 使 用 默认 值 separate, 再 加 几 个 其 他 属性 同样 可 以 改善 
表格 的 外 观 。border-spacing 属 性 定义 相 邻 元 素 边 框 的 间距 ， 如 代码 清单 24-4 所 示 。 


代码 清单 24-4 使 用 porder-spacing 属 性 


<!DOCTYPE HTML> 














Ist 











«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
table { 
border-collapse: separate; 
border-spacing: 10px; 
} 
th, td { 
padding: 2px; 
</style> 
</head> 
<body> 


<table border="1"> 
<caption>Results of the 2011 Fruit Survey</caption> 
<colgroup id="colgroup1"> 
«col id-"coliAnd2" span="2"/> 
«col id-"col3"/» 
</colgroup> 
<colgroup id="colgroup2" span="2"/> 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th> 
<th colspan="2">Size & Votes</th> 
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</tr> 
</thead> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 








</tr> 
<tr> 
«th»2nd Favorite: </th><td>Oranges</td><td>Orange</td> 
<td></td><td></td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th> 
</tr> 
«/tfoot» 
«/table» 
</body> 
</html> 
在 这 个 例子 中 ， 我 在 边框 之 间 指 定 了 10 像 素 的 空白 ， 效 果 如 图 24-5 所 示 。 
[ _ SEITE) 
j B Example X 中 
c Q |Q titan/listings/example.html wf 


Results of the 2011 Fruit Survey 








| Rank | Name Color [Size & Votes 








[ Favorite: | [Apples | [Green | [Medium] [500 























[2nd Favorite: [Oranges Orange | | 


© 2011 Adam Freeman Fruit Data Enterprises 












































图 24-5 ”使 用 porder-spacing 属 性 





24.2.8 “处理 空 单元 格 





我 们 也 可 以 告诉 浏览 器 如 何 处 理 空 单元 格 。 默 认 情况 下 ,即使 单元 格 为 空 ， 浏 览 器 也 会 为 单 





元 格 设置 独立 的 边框 ， 就 像 图 24-5 中 显示 的 那样 。 可 以 使 用 empty-cells 属 
empty-cells 的 默认 值 为 show, 创建 的 效果 请 回头 看 一 下 图 24-3。 如 果 将 该 属 尾 























代码 清单 24-5 ”使 用 empty-cells 属 性 


<style> 
table { 


性 控制 这 种 行为 。 


设置 为 hide， 浏 览 





器 就 不 会 绘制 边框 。 代 码 清 单 24-5 展 示 的 是 在 前 一 个 例子 的 style 元 素 中 添加 empty-cel1s 属 性 。 





24.2 设置 表格 样式 509 





border-collapse: separate; 
border-spacing: 10px; 
empty-cells: hide; 


th, td { 
padding: 2px; 


</style> 
加 上 这 个 属性 后 的 改变 如 图 24-6 所 示 。 
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Results of the 2011 Fruit Survey 
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| Favorite: [Apples Green | [Medium 


2nd Favorite:| |Oranges| |Orange 
© 2011 Adam Freeman Fruit Data Enterprises 


is = = J 


图 24-6 ”使 用 empty-cells 属 
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24.24 ”设置 标题 的 位 置 


我 在 第 11 章 解释 过 ， 如 果 为 table 元 素 添 加 caption， 标 题 会 显示 在 表格 的 顶部 。 不 过 ， 我 们 
可 以 使 用 caption-side 属 性 改变 这 种 默认 行为 。 这 个 属性 有 两 个 值 : top (默认 值 ) 和 bottom。 代 
码 清单 24-6 展 示 了 这 个 属性 的 用 法 。 


代码 清单 24-6 使 用 caption-side 属 性 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
table ( 
border-collapse: collapse; 
caption-side: bottom; 




















} 
th, td { 
padding: 5px; 


</style> 
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</head> 
<body> 
<table border="1"> 
<caption>Results of the 2011 Fruit Survey</caption> 
<colgroup id="colgroup1"> 
«col id-"coliAnd2" span="2"/> 
«col id-"col3"/» 
</colgroup> 
<colgroup id-"colgroup2" span="2"/> 
<thead> 
<tr> 
<th>Rank</th><th>Name</th><th>Color</th> 
<th colspan="2">Size & Votes</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>Favorite:</th><td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 
</tr> 
<tr> 
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td> 
<td></td><td></td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


设置 caption-side 属 性 的 效果 如 图 24-7 所 示 。 
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€ 2011 Adam Freeman Fruit Data Enterprises 
Results of the 2011 Fruit Survey 























图 24-7 设置 caption-side 属 性 改变 标题 的 位 置 
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24.2.5 ”指定 表格 布局 


默认 情况 下 , 浏览 器 会 根据 表格 每 一 列 中 最 宽 的 单元 格 设置 整 列 单元 格 的 宽度 。 这 意味 着 你 
不 需要 担心 还 要 亲自 解决 单元 格 大 小 的 问题 , 不 过 , 这 同时 意味 着 在 能 够 确定 页 面 布局 之 前 , 浏 
览 需 必 须 获取 所 有 的 表格 内 容 。 

浏览 器 显示 表格 采用 的 方法 是 由 table-1ayout 属 性 决定 的 ， 之 前 说 过 ， 它 的 默认 值 是 auto。 
使 用 男 一 个 值 fixed 可 以 禁用 自动 布局 。 在 fixed 模 式 中 ， 表格 的 大 小 是 由 表格 自身 和 单独 每 列 的 
width 值 设 定 的 。 如 果 没 有 列 宽 值 可 用 ， 浏览 器 会 设置 等 距离 的 列 宽 。 

因此 ， 只 要 获取 了 一 行 的 表格 数据 ,浏览 器 就 可 以 确定 列 宽 。 其 他 行内 的 数据 会 自动 换行 以 

适应 列 宽 CAT Gi sere apa 下 略 高 )。 
代码 清单 24-7 展 示 了 table-layout 属 性 的 用 法 。 


代码 清单 24-7 使 用 table-1layout 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type="image/x-icon" /> 
«style» 
table ( 
border-collapse: collapse; 
caption-side: bottom; 
table-layout: fixed; 
width: 100%; 















































} 
th, td { 
padding: 5px; 


</style> 
</head> 
<body> 
<table border="1"> 
<caption>Results of the 2011 Fruit Survey</caption> 
«colgroup id="colgroup1"> 
«col id-"coliAnd2" span="2"/> 
«col id="col3"/> 
«/colgroup» 
«colgroup id-"colgroup2" span-"2"/» 
«thead» 
«tr» 
«th»Rank«/th»«th»Name« /th»«th»Color«/th» 
«th colspan="2">Size & Votes</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>Really Really Really Long Title:</th> 
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<td>Apples</td><td>Green</td> 
<td>Medium</td><td>500</td> 
</tr> 
<tr> 
«th»2nd Favorite: </th><td>Oranges</td><td>Orange</td> 
<td></td><td></td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


在 这 个 例子 中 , 我 设置 了 tab]le 元 素 的 width 属性 占据 100% 的 可 用 空间 , 将 表格 的 布局 样式 设 
为 fixed。 我 还 改变 了 第 二 行 中 一 个 单元 格 的 内 容 ， 以 展示 布局 效果 ， 如 图 24-8 所 示 。 
[ = Sc) 
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Rank Name | Size & Votes 
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Really Long | Apples | Green Medium 500 
Title: 











2nd Favorite: | Oranges | Orange | 





© 2011 Adam Freeman Fruit Data Enterprises 
Results of the 2011 Fruit Survey 


























124-8 ”使 用 table-layout 属 性 
注意 页 面 可 用 空间 是 如 何在 表格 的 五 列 之 间 均 匀 分 配 , 以 及 第 二 行 中 的 长 标题 如 何 断 行 来 适 
应 列 宽 的 ， 断 行 导致 了 第 二 行 比 其 他 行 高 。 
24.3 ”设置 列表 样式 
有 许多 属性 是 专门 用 来 设置 列表 样式 的 ， 表 24-4 总 结 了 这 些 属 性 。 
表 24-4 ”列表 相关 属性 
























































属 性 说 ” 明 值 
list-style-type 指定 列表 中 使 用 的 标记 的 类 型 参见 表 24-5 
list-style-image 指定 图 像 作为 列表 标记 < 图 像 > 
list-style-position 指定 标记 相对 于 列表 项 目 盒子 的 位 置 inside 

outside 

















list-style 设置 所 有 列表 特征 的 简写 属性 参见 下 面 的 解释 
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list-style 简 写 属性 的 格式 如 下 所 示 : 
list-style: <list-style-type> <list-style-position> <list-style-image> 
24.3.1 设置 列表 标记 类 型 


list-style-type 属 性 用 来 设置 标记 ( 有 时 候 也 称 为 项 目 符号 ) 的 样式 , 这 个 属性 允许 的 值 如 
表 24-5 所 示 。 




















表 24-5 1ist-style-type 属 性 的 值 

值 说 明 
none 没有 标记 
see 使 用 指定 形状 的 标记 ， 注 意 并 不 是 所 有 的 浏览 器 都 支持 每 一 种 
Circle 
diamond 
disc 
dash 
square 
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aT 
ur 


decimal 





j 十 进 制 数字 作为 标记 
] 二 进 制 数 作为 标记 

j 小 写字 母 字符 作为 标记 
j 大 写字 母 字符 作为 标记 





村 
ur 











EE 


binary 








lower-alpha 














Bm 





upper-alpha 























表 24-5 只 是 展示 了 一 部 分 可 用 的 样式 。 除 了 这 里 列 出 的 ， 列 表 标 记 还 有 很 多 样式 ， 比 如 不 同 
的 字母 字符 、 不 同 的 符号 样式 ,以 及 数字 约定 。www.w3.org/TR/css3-lists 列 出 了 完整 的 列表 样式 。 
代码 清单 24-8 展 示 了 1ist-style-type 属 性 的 用 法 。 
代码 清单 24-8 使 用 list-style-type 属 性 

«IDOCTYPE HTML» 








«html» 

«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 

ol { 
list-style-type: lower-alpha; 

</style> 

</head> 

<body> 


I like apples and oranges. 


I also like: 
<ol> 
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«li»bananas«/li» 

<li>mangoes</li> 

<li style-"list-style-type: decimal"»cherries«/li» 
«li»plums«/li» 

«li»peaches«/li» 

<li>grapes</li> 

</ol> 
</body> 
</html> 


可 以 将 这 个 属性 应 用 到 整个 列表 或 者 单独 的 列表 项 。 这 个 例子 中 两 种 方法 我 都 用 上 了 (不 过 ， 
最 终 的 结果 可 能 让 读者 有 点 迷糊 )， 效 果 请 见 图 24-9。 
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| I like apples and oranges. I also like: E 


bananas 
. mangoes 
cherries 
plums 

. peaches 
. grapes 


m 





moh we p 























图 24-9 ”设置 列表 标记 的 样式 


24.3.2 ”使 用 图 像 作为 列表 标记 
list-style-image 属 性 可 以 将 图 像 用 做 列表 标记 。 代 码 清单 24-9 展 示 了 这 个 属性 的 用 法 。 
代码 清单 24-9 ”使 用 图 像 作 为 列表 标记 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
ul { 
list-style-image: url('banana-vsmall.png'); 
上 
</style> 
</head> 
<body> 


I like apples and oranges. 
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I also like: 

<ul> 
«li»bananas«/li» 
<li>mangoes</1i> 
«li»cherries«/li» 
«li»plums«/li» 
«li»peaches«/li» 
<li>grapes</li> 

</ul> 

</body> 
</html> 


应 用 这 个 属性 后 的 效果 如 图 24-10 所 示 。 
La = B 一 一 7| 
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cherries 


c plums 
c peaches 
c grapes Lj 





























图 24-10 ”使 用 图 像 作 为 列表 标记 





243.3 ”设置 列表 标记 的 位 置 

可 以 使 用 list-style-position 属 性 指定 标记 相对 于 1i 元 素 内 容 框 的 位 置 。 这 个 属性 有 两 个 
值 : inside 和 outside， 前 者 定义 标记 位 于 内 容 框 内 部 ， 后 者 定义 标记 位 于 内 容 框 外 部 。 代 码 清 
单 24-10 展 示 了 list-style-position 属 性 和 它 的 值 的 用 法 。 

















代码 清单 24-10 ”指定 标记 的 位 置 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content="A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
li.inside ( 
list-style-position: inside; 
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} 


li.outside { 
list-style-position: outside; 
} 


li { 
background-color: lightgray; 
} 


</style> 
</head> 
<body> 
I like apples and oranges. 


I also like: 

<ul> 
These are the inside items: 
<li class="inside">bananas</li> 
<li class="inside">mangoes</li> 
<li class="inside">cherries</li> 
These are the outside items: 
<li class="outside">plums</li> 
<li class="outside">peaches</li> 
<li class="outside">grapes</li> 

</ul> 

</body> 
</html> 


我 将 1i 的 项 分 成 了 两 类 , 分 别 为 它们 的 list-style-position 属 性 应 用 了 不 同 的 值 , 效果 如 
图 24-11 所 示 。 
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I like apples and oranges. I also like: 


These are the inside items: 
* bananas 
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图 24-11 设置 标记 位 置 











在 上 图 中 ， 我 为 所 有 的 1i 元 素 设 置 了 background-color 属 性 ， 这 样 方便 大 家 看 清楚 
list-style-position 属 性 不 同 值 的 效果 。 
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24.4 设置 光标 样式 
cursor 属 性 用 来 改变 光标 的 外 形 。 表 24-6 总 结 了 该 属性 的 值 。 


表 24-6 ”cursor 属 性 的 值 
E 性 说 Hj 值 














cursor 设置 光标 auto, crosshair, default, help, move, pointer, progress, text, wait, n-resize, s-resize, e-resize, cum 


的 样式 w-resize, ne-resize, nw-resize, se-resize, sw-resize 














当 鼠 标 划 过 被 设置 样式 的 元 素 时 ，cursor 属 性 的 不 同 取 值 告诉 浏览 器 显示 不 同 的 光标 形状 。 











cursor 属 性 的 用 法 如 代码 清单 24-11 所 示 。 
代码 清单 24-11 使 用 cursor 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
p t 
padding: 5px; 
border: medium double black; 
background-color: lightgray; 
font-family: sans-serif; 





] 

#tbanana { 
font-size: x-large; 
border: medium solid white; 
background-color: green; 
color: rgba(255, 255, 255, 0.7); 
cursor: progress; 


} 


</style> 
</head> 
<body> 
«p id-"fruittext"» 
There are lots of different kinds of fruit - there are over 500 


varieties of «span id-"banana"»banana«/span» alone. By the time we add the 
countless types of apples, oranges, and other well-known fruit, we are faced 


with thousands of choices. 
</p> 
</body> 
</html> 


设置 效果 如 图 24-12 所 示 。 当 我 将 鼠标 移 过 span 元 素 时 ， 光 标 变 成 了 Windows 7 的 等 待 光 标 ， 





为 了 证 你 看 清楚 ， 我 把 等 待 光标 放大 了 。 
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图 24-12 设置 光标 样式 





24.5 小结 

本 章 讲解 了 一 些 不 适合 放 到 其 他 章 的 CSS 属 性 。 这 并 不 是 说 这 些 属性 不 重要 ， 只 是 它们 跟 那 
些 章 的 主题 不 太 相 符 。 本 章 介 绍 的 属性 可 以 设置 所 有 元 素 的 颜色 和 透明 度 , 为 列表 和 表格 应 用 特 
定 样式 ， 它 们 本 身 都 是 至 关 重 要 的 HTML 特 性 。 























使 用 DOM 





DOM (Document Object Model， 文 档 对 象 模型 ) 人 允许 我 们 用 JavaScript 来 探查 和 操作 HTML 
文档 里 的 内 容 。 它 对 于 创建 丰富 性 内 容 而 言 是 必 不 可 少 的 一 组 功能 。 在 接 下 来 的 几 章 里 ， 我 会 
向 你 展示 如 何 进 入 DOM， 如 何 找到 并 修改 代表 文档 元 素 的 JavaScript 对 象 ， 以 及 如 何 使 用 事件 
来 响应 用 户 的 交互 操作 。 


理解 DOM 


























在 这 一 部 分 ， 你 将 开始 探索 文档 对 象 模 型 (DOM )。 通 过 使 用 目前 为 止 本 书 向 你 展示 的 元 素 
和 CSS 属 性 ， 你 可 以 实现 某 些 复杂 的 效果 。 但 是 ， 如 果 想 完全 控制 你 的 HTML 文档 ， 就 需要 使 用 
JavaScript。DOM 把 JavaScript 和 HTMIL 文档 的 内 容 联系 起 来 。 通 过 使 用 DOM， 你 能 够 添加 、 移 除 
和 操作 各 种 元 素 。 还 可 以 使 用 事件 (event) 来 响应 用 户 的 交互 操作 ， 以 及 完全 控制 CSS。 

从 这 里 开始 , 你 就 处 于 HTML5 的 程序 设计 部 分 了 。 在 此 之 前 , 你 已 经 用 元 素 和 CSS 声 明 创建 
了 内 容 ， 现 在 是 时 候 以 程序 员 的 身份 开始 使 用 JavaScript 了 。 如 果 你 需要 复习 一 下 ， 请 参阅 第 5 章 
提供 的 JavaScript 基 础 知识 概览 。 


25.1 理解 文档 对 象 模型 


DOM 是 一 组 对 象 的 集合 ， 这 些 对 象 代 表 了 HTML 文档 里 的 各 个 元 素 。 顾 名 思 义 ，DOM 就 像 
一 个 模型 ， 它 由 代表 文档 的 众多 对 象 组 成 。DOM 是 Web 开 发 的 关键 工具 之 一 ， 它 是 HTML 文档 的 
结构 和 内 容 与 JavaScript 之 间 的 桥梁 。 作 为 示例 ， 代 码 清单 25-1 展 示 了 一 个 简单 的 HTML 文档 。 


代码 清单 25-1 ”一 个 简单 的 HTML 文档 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«/head» 
«body» 
«p id-"fruittext"» 
There are lots of different kinds of fruit - there are over 500 
varieties of «span id-"banana"»banana«/span» alone. By the time we add the 
countless types of apples, oranges, and other well-known fruit, we are faced 
with thousands of choices. 
</p> 
<p id="apples"> 
One of the most interesting aspects of fruit is the 
variety available in each country. I live near London, in an area which is 































































































known for its apples. 
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</p> 
</body> 
</html> 
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Example €E 
€ > C Q titan/listings/example.htm vy S 
| There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the | | 


| time we add the countless types of apples, oranges, and other well-known fruit, we are faced 
with thousands of choices. 











One of the most interesting aspects of fruit is the variety available in each country. I live near | 
| London, in an area which is known for its apples. 





图 25-1 ”显示 基本 HTML 文档 


作为 显示 HTML 文 档 过 程 中 的 一 个 步骤 ， 浏 览 器 会 解析 HTML 并 创建 一 个 模型 。 这 个 模型 保 
存 了 各 个 HTML 元 素 之 间 的 层级 关系 〈 如 图 25-2 所 示 )， 每 个 元 素 都 由 一 个 JavaScript 对 象 表示 。 


























图 25-2 ”HTML 文档 里 的 元 素 层级 关系 


正如 后 面 几 章 所 示 ， 你 可 以 用 DOM 来 获取 文档 信息 ， 也 可 以 对 其 进行 修改 。 这 是 现代 Web 
应 用 程序 的 基础 。 

模型 里 的 每 一 个 对 象 都 有 若干 属性 和 方法 。 当 你 用 它们 来 修改 对 象 的 状态 时 , 浏览 器 会 让 这 
些 改动 反映 到 对 应 的 HTML 元 素 上 ， 并 更 新 你 的 文档 。 

所 有 代表 元 素 的 DOM 对 象 都 支持 同一 组 基本 功能 : HTMLElement 对 象 和 其 定义 的 核心 功能 始 
终 是 可 用 的 ,无 论 对 象 代表 何 种 元 素 都 是 如 此 。 另 外 ,， 某 些 对 象 会 定义 一 些 额 外 的 功能 ,这些 操 
作 反 映 了 特定 HTML 元 素 独 一 无 二 的 特性 。 我 会 在 第 31 章 介绍 这 些 额 外 的 功能 。 记 住 下 面 的 一 点 
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很 重要 : 文档 模型 里 任何 代表 某 个 元 素 的 对 象 都 至 少 能 支持 HTMLElement 功 能 ， 其 中 一 些 还 支持 
额外 的 功能 。 

不 是 所 有 可 供 使 用 的 对 和 象 都 代表 了 HTML 元 素 。 正 如 你 即将 看 到 的 ,一 些 对 和 象 代表 元 素 的 集 
合 ， 另 一 些 则 代表 DOM 自 身 的 信息 ， 当 然 还 有 Document 这 个 对 象 ， 它 是 我 们 探索 DOM 的 入 口 ， 
也 是 第 26 章 的 主题 。 






































注意 ”我 在 这 里 省 略 了 一 些 细节 。 如 果 你 熟悉 面向 对 象 程序 设计 的 概念 ， 那 么 了 解 HTMLElement 
是 一 个 接口 可 能 会 有 所 帮助 ， 它 是 由 DOM 所 包含 的 对 象 实现 的 。 用 于 代表 具体 元 素 的 对 
象 是 HTMLElement 派 生出 来 的 接口 ， 意 思 是 你 既 可 以 把 某 个 对 象 当 做 HTMLElement 的 实现 ， 
也 可 以 当做 其 更 为 具体 的 子 类 型 。 如 果 你 不 熟悉 面向 对 象 的 概念 也 不 用 担心 。 对 主流 Web 
程序 设计 而 言 ， 是 否 理解 它们 无 关 紧 要 。 我 不 会 再 谈 及 它们 了 ， 简 单 起 见 ， 下 面 将 把 所 
有 的 一 切 都 称 为 对 象 。 


25.2 ”理解 DOM Level 和 兼容 性 


开始 使 用 DOM 时 ， 你 会 碰 到 网 络 上 一 些 文章 和 教程 提 到 DOM Level ( 即 DOM 等 级 ， 比 如 某 
个 特定 功能 是 在 DOM Level 3 中 定义 的 ), DOM Level 是 标准 化 过 程 中 的 版 本 号 ， 在 大 多 数 情况 下 
应 该 忽略 它们 。 

DOM 的 标准 化 过 程 并 不 是 完全 成 功 的 ， 每 一 个 DOM Level 都 有 描述 它 的 标准 和 文档 ， 但 它 
们 并 没有 被 完整 地 实现 , 浏览 器 只 是 简单 地 挑选 了 其 中 的 有 用 功能 , 而 忽略 了 其 他 的 。 更 糟糕 的 
是 ， 已 经 实现 的 功能 之 间 还 存在 着 某 种 程度 的 不 一 致 性 。 

部 分 问题 在 于 ，DOM 规 范 与 HTML 标 准 过 去 是 分 别 开 发 的 。HTML5 试 图 通过 包含 一 组 必须 
实现 的 DOM 核 心 功能 来 解决 这 个 问题 。 然 而 这 种 做 法 尚未 见效 ， 碎 片 化 仍然 存在 。 

有 多 种 方式 可 用 来 应 对 DOM 功 能 的 多 变性 。 第 一 种 方式 是 使 用 某 个 JavaScript 库 C 比如 
jQuery )， 它 消除 了 浏览 器 之 间 实 现 方式 的 差别 。 使 用 库 的 优点 在 于 其 一 致 性 ， 但 缺点 是 只 能 使 
用 库 支 持 的 那些 功能 。 如 果 想 突破 库 原 有 功能 的 局 限 ， 就 只 能 转 回 到 直接 操作 DOM 上， 并 重新 
面 对 之 前 的 那些 问题 。( 这 并 不 是 说 jQuery 和 类 似 的 库 没 有 价值 ， 它 们 很 有 用 ， 非 常 值得 去 了 解 
二 

第 二 种 是 保守 方式 : 只 使 用 你 所 知 的 被 广泛 支持 的 那些 功能 。 这 种 方式 一 般 来 说 是 最 为 明智 
的 , 不 过 它 需 要 仔细 而 全 面 的 测试 。 不仅 如 此 ， 你 还 必须 仔细 测试 新 版 的 浏览 器 ,确保 对 这 些 功 
能 的 支持 没有 发 生变 化 或 者 被 移 除 。 










































































测试 DOM 功能 


第 三 种 方式 是 测试 与 某 一 功能 相关 的 DOM 对 象 属性 或 方法 是 否 存在 ,代码 清单 25-2 包 含 了 一 
个 简单 的 例子 。 
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提示 不 必 介 意 代 码 清单 25-2 中 脚本 的 细节 。 我 会 在 接 下 来 的 几 章 里 解释 它 使 用 的 所 有 对 象 和 


功能 。 


代码 清单 25-2 ”测试 某 个 功能 


<!DOCTYPE HTML> 





«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<p id="paratext"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
<img src="apple.png" alt="apple"/> 
</p> 
<script> 
var images; 
if (document.querySelectorAll) { 
images = document.querySelectorAll("#paratext > img"); 
} else { 
images = document.getElementById("paratext").getElementsByTagName(" img"); 
} 
for (var i = 0; i < images.length; i++) { 
images[i].style.border = "thick solid black"; 
images[i].style.padding = "4px"; 
} 
</script> 
</body> 
</html> 





在 这 个 例子 里 ， 脚 本 使 用 一 条 if 语 句 来 判断 document 对象 是 否定 义 了 一 个 名 为 
querySelectorAl1 的 方法 。 如 果 这 条 语句 的 计算 结果 是 true， 那 么 浏览 器 是 支持 这 一 功能 的 ， 我 
就 可 以 开始 使 用 它 。 如 果 该 语句 的 计算 结果 是 false， 那么 我 可 以 换 一 种 方式 来 达到 同样 的 目的 。 

谈 到 DOM 时 ， 你 经 常 看 到 的 就 是 刚才 这 种 建议 ， 但 它 过 于 草率 ， 没 有 指出 其 中 的 缺陷， 而 
这 些 缺 陷 有 可 能 很 严重 。 

第 一 个 缺陷 在 于 ,并 不 总 是 存在 男 一 种 方式 能 实现 某 个 给 定 功能 的 效果 。 代 码 清 单 25-2 能 顺 
利 工 作 是 因为 我 测试 的 功能 是 其 他 函数 的 一 种 便利 性 加 强 形式 ， 但 情况 并 不 总 是 如 此 。 

第 二 个 缺陷 是 我 只 测试 了 该 功能 是 否 存 在 , 而 不 是 它 的 实现 质量 和 一 致 性 。 许多 功能 ( 特 
别 是 新 的 功能 ) 需要 多 个 版 本 的 浏览 器 才能 稳定 下 来 并 实现 一 臻 性。 虽然 这 个 问题 不 像 以 前 
那样 严重 ,但 你 也 许 很 容易 就 会 遇 到 意料 之 外 的 结果 ， 因 为 你 依赖 的 浏览 器 功能 实现 方式 存 
在 差别 。 

第 三 个 缺陷 是 必须 测试 每 一 种 你 所 依赖 的 功能 。 这 么 做 需要 耗费 大 量 的 精力 , 而 且 产 生 的 代 
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码 充 斥 着 无 穷 无 尽 的 测试 。 我 并 不 是 说 它 不 是 一 种 有 用 的 技巧 ， 而 是 它 存 在 缺陷 , 不 应 该 取代 恰 
当 的 测试 。 


25.3 DOM 快速 查询 
以 下 部 分 提供 了 我 在 后 面 几 音 介绍 的 对 象 、 方 法 、 属 性 和 事件 的 快速 查询 。 














25.3.1 Document 的 成 员 


第 26 章 介绍 了 Document 对 象 , 它 代表 当前 的 文档 ， 也 是 你 探索 DOM 的 入 口 。 表 25-1 概 述 了 此 
对 象 所 定义 的 成 员 。 


表 25-1 Document 对 象 



























































































































































名 称 说 OB iR [s] 
activetlement 返回 代表 文档 中 当前 获得 焦点 元 素 的 对 象 HTMLElement 
body 返回 代表 文档 中 body 元 素 的 对 象 HTMLElement 
characterSet 返回 文档 的 字符 集 编 码 。 这 是 一 个 只 读 属 性 字符 串 
charset 获取 或 设置 文档 的 字符 集 编码 字符 串 
childNodes 返回 子 元 素 的 集合 HTMLElement[ ] 
compatMode 获取 文档 的 兼容 性 模式 字符 串 
cookie 获取 或 设置 当前 文档 的 cookie 字符 串 
defaultCharset 获取 浏览 器 所 使 用 的 默认 字符 编码 字符 串 
defaultView 返回 当前 文档 的 Window 对 象 。 关 于 这 个 对 象 的 详情 请 参见 第 26 章 ”Window 
dir 获取 或 设置 文档 的 文本 方向 字符 串 
domain 获取 或 设置 当前 文档 的 域名 字符 串 
embeds 返回 所 有 代表 文档 中 embed 元 素 的 对 象 HTMLCollection 
plugins 
firstChild 返回 某 个 元 素 的 第 一 个 子 元 素 HTMLElement 
forms 返回 所 有 代表 文档 中 form 元 素 的 对 象 HTMLCollection 
getElementById(«id») 返回 带 有 指定 id 值 的 元 素 HTMLElement 
getElementsByClassName(«class») ”返回 带 有 指定 class 值 的 元 素 HTMLElement[] 
getElementsByName(«name») 返回 带 有 指定 name 值 的 元 素 HTMLElement[] 
getElementsByTagName(<tag>) 返回 带 有 指定 类 型 的 元 素 HTMLElement[ ] 
hasChildNodes() 如 果 当 前 元 素 有 子 元 素 则 返回 true 布尔 值 
head 返回 代表 head 元 素 的 对 象 HTMLHeadElement 
images 返回 所 有 代表 ;img 元 素 的 对 象 HTMLCollection 
implementation 提供 关于 DOM 可 用 功能 的 信息 DOMImplementation 
lastChild 返回 最 后 一 个 子 元 素 HTMLElement 
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(E) 
名 M 说 — HH 返 E 
lastModified 返回 文档 的 最 后 修改 时 间 字符 串 
links 返回 所 有 代表 文档 中 具备 href 属 性 的 a 和 area 元 素 的 对 象 HTMLCollection 
location 提供 关于 当前 文档 URL 的 信息 Location 
nextSibling 返回 位 于 当前 元 素 之 后 的 兄弟 元 素 HTMLElement 
parentNode 返回 父 元 素 HTMLElement 
previousSibling 返回 位 于 当前 元 素 之 前 的 兄弟 元 素 HTMLELement 
querySelector(«selector») 返回 匹配 特定 CSS 选 择 器 的 第 一 个 元 素 HTMLElement 
querySelectorAll(«selector») 返回 匹配 特定 CSS 选 择 器 的 所 有 元 素 HTMLElement [] 
readyState 返回 当前 文档 的 状态 字符 串 
referrer 返回 链接 到 当前 文档 的 文档 URL ( 它 是 对 应 HTTP 标 头 的 值 ) 字符 串 
scripts 返回 所 有 代表 script 元 素 的 对 象 HTMLCollection 
title 获取 或 设置 当前 文档 的 标题 字符 串 
第 26 章 还 介绍 了 Location 对 象 ， 表 25-2 概 述 了 这 个 对 象 。 
表 25-2 Location 对 象 
名 mm 说 — HH ix g 
assign(«URL») 导航 到 指定 的 URL 上 void 
hash XB cU FLOCRIURL A (SES AS) 部 分 字符 串 








3j 
获取 或 设置 文档 URL 的 主机 名 和 端口 号 部 分 
获取 或 设置 文档 URL 的 主机 名 部 分 

href 获取 或 设置 当前 文档 的 地 址 
3 
3 
3j 











hostname 




















4o db od] dE at 
ES 
































pathname 兴 取 或 设置 文档 UREL 的 路 径 部 分 符 串 
port 类 取 或 设置 文档 URIL 的 端口 号 部 分 符 串 
protocol 类 取 或 设置 文档 UREL 的 协议 部 分 符 串 
reload() 重新 加 载 当 前 文档 void 

replace(<URL>) 清除 当前 文档 并 导航 至 URL 所 指定 的 新 文档 void 

resolveURL (<URL>) 将 指定 的 相对 URL 解 析 为 绝对 URL 字符 串 
search 获取 或 设置 文档 URL 的 查询 ( 问号 串 ) 部 分 字符 串 





25.3.2 Window 的 成 员 
第 27 章 介绍 了 Window 对 象 ， 它 定义 了 众多 的 功能 。 表 25-3 概 述 了 此 对 象 所 定义 的 成 员 。 
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表 25-3 Window 对 象 

名 P 说 明 返 回 
alert (<msg>) 向 用 户 显示 一 个 对 话 框 窗口 并 等 候 其 被 关闭 void 
blur() 让 窗口 失去 键盘 焦点 void 
clearInterval (<id>) 撤销 某 个 时 间 间 隔 计 时 器 void 
clearTimeout («id») 撤销 某 个 超时 计时 器 void 
close() KA fa void 
confirm(<msg> ) 显示 一 个 带 有 确认 和 取消 提示 的 对 话 框 窗 布尔 值 
defaultView 返回 活动 文档 的 Window Window 
document 返回 与 此 窗口 关联 的 Document 对 象 Document 
focus() 让 窗口 获得 键盘 焦点 void 
frames 返回 文档 内 髓 iframe 元 素 的 Window 对 象 数组 Window[] 
history 提供 对 浏览 器 历史 的 访问 History 
innerHeight 获取 窗口 内 容 区 域 的 高 度 数值 
innerWidth 获取 窗口 内 容 区 域 的 宽度 数值 
length 返回 文档 内 秀 的 iframe 元 素数 量 数值 
location 提供 当前 文档 地 址 的 详细 信息 Location 
opener 返回 打开 当前 浏览 器 上 下 文 环 境 NWindow Window 
outerHeight 获取 窗口 的 高 度 ， 包 括 边 框 和 菜单 栏 等 数值 
outerWidth 获取 窗口 的 宽度 ， 包 括 边框 和 菜单 栏 等 数值 
pageXOffset 获取 窗口 从 左上 角 算 起 水 平 滚动 过 的 像素 数 数值 
pageYOffset 获取 窗口 从 左上 角 算 起 垂直 滚动 过 的 像素 数 数值 
parent 返回 当前 Window 的 父 Window Window 
postMessage(<msg>, <origin>) 给 另 一 个 文档 发 送 消息 void 
print() flan AP FT EN void 
prompt(<msg>, <val>) 显示 对 话 框 提示 用 户 输入 一 个 值 字符 串 
screen 返回 一 个 描述 屏幕 的 Screen 对 象 Screen 
Rohe 获取 从 窗口 左边 缘 到 屏幕 左边 缘 的 像素 数 数值 
ee 获取 从 窗口 上 边缘 到 屏幕 上 边缘 的 像素 数 数值 
scrollBy(oo, «y») 让 文档 相对 其 当前 位 置 进行 滚动 void 
scrollTo(oo, <y>) 滚动 到 指定 的 位 置 void 
self 返回 当前 文档 的 Nindow Window 
setInterval(<function>, <time>) BETAS, BED time POV AFR E H PHBL 整数 
setTimeout(<function>, <time>) 创建 一 个 计时 器 ， 等 待 time 毫 秒 后 调用 指定 的 函数 整数 
showModalDialog(«url») 弹出 一 个 窗口 ， 显 示 指 定 的 URL void 
stop() 停止 载 入 文档 void 
top 返回 最 上 层 的 Window Window 
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第 27 章 还 介绍 了 History 对 象 ， 表 25-4 概 述 了 此 对 象 的 成 员 。 


表 25-4 History% 




































































名 称 说 明 返 回 
back() 在 浏览 历史 里 后 退 一 步 void 
forward() 在 浏览 历史 里 前 进一步 void 

. 转 到 相对 于 当前 文档 的 某 个 浏览 历史 位 置 。 正 值 是 前 进 ， 负 
go(<index>) 值 是 后 退 void 
length 返回 浏览 历史 里 的 项 目 数量 数值 
pushState(<state>, <title>, <url>) 向 浏览 器 历史 添加 一 个 条 目 void 
replaceState(<state>, <title>, <url>) 替换 浏览 器 历史 中 的 当前 条 目 void 
state 返回 浏览 器 历史 里 关联 当前 文档 的 状态 数据 对 象 


第 27 章 还 介绍 了 Screen 对 象 ， 表 25-5 概 述 了 此 对 象 的 成 员 。 


表 25-5 ”Screen 对 象 






































































































































名 称 说 明 返回 
availHeight 返回 屏幕 上 可 供 显 示 窗 口 部 分 的 高 度 〈 排除 工具 栏 之 类 ) 数值 
availWidth 返回 屏幕 上 可 供 显示 窗口 部 分 的 宽度 〈 排 除 工具 栏 之 类 ) 数值 
colorDepth 返回 屏幕 的 颜色 深度 数值 
height 返回 屏幕 的 高 度 数值 
width 返回 屏幕 的 宽度 数值 

25.3.8 HTMLElement 的 成 员 
第 28 章 介绍 了 HTMLElement 对 象 , 它 代表 了 文档 里 的 各 种 HTML 元素 。 表 25-6 概 述 了 此 对 象 定 
ren 3 
#225-6 HTMLElement 对 象 
名 称 说 明 返 E 
checked 获取 或 设置 checked 属 性 的 存在 状态 布尔 值 
classList 获取 或 设置 元 素 所 属 类 的 列表 DOMTokenList 
className 获取 或 设置 元 素 所 属 类 的 列表 字符 串 
dir 获取 或 设置 dir 属 性 的 值 字符 串 
disabled 获取 或 设置 disabled 属 性 的 存在 状态 布尔 值 
hidden 获取 或 设置 hidden 属 性 的 存在 状态 布尔 值 
id 获取 或 设置 id 属性 的 值 字符 串 
lang 获取 或 设置 1ang 属 性 的 值 字符 串 
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(EE) 
名 称 说 HH ik E 
spellcheck 获取 或 设置 spellcheck 属 性 的 存在 状态 布尔 值 
tabIndex 获取 或 设置 tabindex 属 性 的 值 数值 
tagName 返回 标签 名 (象征 元 素 的 类 型 ) 字符 串 
title 获取 或 设置 title 属 性 的 值 字符 串 
add(<class>) 给 元 素 添加 指定 的 类 void 
contains(«class») 如 果 元 素 属于 指定 的 类 则 返回 true 布尔 值 
length 返回 元 素 所 属 类 的 数量 数值 
remove(<class>) 从 元 素 上 移 除 指定 的 类 void 
toggle(<class>) 如 果 类 不 存在 就 添加 它 ， 如 果 存 在 则 移 除 它 布尔 值 
attributes 返回 应 用 到 元 素 上 的 属性 Attr[] 
dataset 返回 以 data- 开 头 的 属性 字符 串 数 组 [<namey] 
getAttribute(<name>) 返回 指定 属性 的 值 字符 串 
hasAttribute(«name») 如 果 元 素 带 有 指定 属性 则 返回 true 布尔 值 
removeAttribute(<name>) 从 元 素 上 移 除 指定 属性 void 
setAttribute(<name>, <value>) 应 用 一 个 指定 名 称 和 值 的 属性 void 
appendChild(HTMLElement) 将 指定 元 素 附加 为 当前 元 素 的 子 元 素 HTMLElement 
cloneNode(boolean) 复制 某 个 元 素 HTMLElement 
compareDocumentPosition(HTMLElement) 判断 某 个 元 素 的 相对 位 置 数值 
innerHTML 获取 或 设置 元 素 的 内 容 字符 串 
insertAdjacentHTML(<pos>, <text>) 相对 于 元 素 的 位 置 插入 HTML void 
insertBefore(<newelem>, <childElem>) 将 第 一 个 元 素 插 入 到 第 二 个 ( 子 ) 元 素 之 前 HTMLElement 
isEqualNode(«HTMLElement») 判断 指定 元 素 是 否 与 当前 元 素 等 同 布尔 值 
isSameNode(HTMLElement ) 判断 指定 元 素 是 否 就 是 当前 元 素 布尔 值 
outerHTML 获取 或 设置 某 个 元 素 的 HTML 和 内 容 字符 串 
removeChild(HTMLElement) 从 当前 元 素 上 移 除 指定 的 子 元 素 HTMLElement 
replaceChild(HTMLElement, HTMLElement) ”替换 当前 元 素 的 某 个 子 元 素 HTMLElement 
createElement (<tag>) 指定 标签 类 型 创建 一 个 新 的 HTMLElement 对 和 象 HTMLElement 
createTextNode(«text») 指定 内 容 创建 一 个 新 的 Text 对 象 Text 




























































































































































































第 28 音 还 介绍 了 Text 对 象 ， 它 用 于 代表 文档 中 的 文本 内 容 。 表 25-7 描 述 了 Text 对 象 的 成 员 。 
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#225-7 Text 对 象 




































































名 称 说 明 iR [s] 
appendData(«string») 在 文本 块 的 末尾 附加 指定 字符 串 void 
data 获取 或 设置 文本 字符 串 
deleteData(<offset>, <count>) 移 除 字符 串 中 的 文本 。 第 一 个 数字 是 偏 移 量 ， 第 二 个 数字 void 

是 要 移 除 的 字符 数量 
insertData(<offset>, <string>) 在 指定 的 偏 移 量 位 置 插入 指定 字符 串 void 
length 返回 字符 数量 数值 
replaceData(<offset>, «count», <string>) “用 指定 字符 串 替 换 一 部 分 文本 void 
replacewholeText (<string>) 替换 全 部 文本 Text 
splitText («number») 将 现 有 的 Text 元 素 在 指定 的 俩 移 量 处 一 分 为 二 。 这 一 方法 Tex 

的 演示 请 参见 28.3.6 节 
substringData(<offset>, <count>) 返回 文本 的 子 串 字符 串 
wholeText 获取 文本 字符 串 

















25.3.4 DOM 里 的 CSS 属性 


第 29 章 介绍 了 如 何 使 用 DOM 来 处 理 文档 中 的 CSS 样 式 。 表 25-8 列 出 了 CsSstyleDeclaration 
对 象 的 属性 和 它们 所 对 应 的 样式 〈 以 及 介绍 它们 的 具体 章节 )。 


表 25-8 CSSStyleDeclaration 对 象 的 成 员 


























成 uU 对 应 于 所 在 章 
background background 19 
backgroundAttachment background-attachment 19 
backgroundColor background-color 19 
backgroundImage background-image 19 
backgroundPosition background-position 9 
backgroundRepeat background-repeat 19 
border border 19 
borderBottom border-bottom 9 
borderBottomColor border-bottom-color 19 
borderBottomStyle border-bottom-style 19 
borderBottomWidth border-bottom-width 9 
borderCollapse border-collapse 24 
borderColor border-color 19 
borderLeft border-left 19 
borderLeftColor border-left-color 19 
borderLeftStyle border-left-style 19 
borderLeftWidth border-left-width 19 
borderRight border-right 19 
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( 续 ) 

mou 对 应 于 所 在 
borderRightColor border-right-color 19 
borderRightStyle border-right-style 19 
borderRightWidth border-right-width 19 
borderSpacing border-spacing 24 
borderStyle border-style 19 
borderTop border-top 19 
borderTopColor border-top-color 19 
borderTopStyle border-top-style 19 
borderTopWidth border-top-width 19 
borderWidth border-width 19 
captionSide caption-side 24 
clear clear 20 
color color 24 
cssFloat float 20 
cursor cursor 24 
direction direction 22 
display display 20 
emptyCells empty-cells 24 
font font 22 
fontFamily font-family 22 
fontSize font-size 22 
fontStyle font-style 22 
fontVariant font-variant 22 
fontWeight font-weight 22 
height height 20 
letterSpacing letter-spacing 22 
lineHeight line-height 22 
listStyle list-style 24 
listStyleImage list-style-image 24 
listStylePosition list-style-position 24 
listStyleType list-style-type 24 
margin margin 20 
marginBottom margin-bottom 20 
marginLeft margin-left 20 
marginRight margin-right 20 
marginTop margin-top 20 
maxHeight max-height 20 
maxWIdth max-width 20 
minHeight min-height 20 
minWidth min-width 20 
outline outline 19 





25.3 DOM 快速 查询 531 




















(EE) 
成 uU 对 应 于 所 在 章 
outlineColor outline-color 19 
outlineStyle outline-style 19 
outlineWidth outline-width 19 
overflow overflow 20 
padding padding 20 
paddingBottom padding-bottom 20 
paddingLeft padding-left 20 
paddingRight padding-right 20 
paddingTop padding-top 20 
tableLayout table-layout 24 
textAlign text-align 22 
textDecoration text-decoration 22 
textIndent text-indent 22 
textShadow text-shadow 22 
textTransform text-transform 22 
visibility visibility 20 
whitespace whitespace 22 
width width 20 
wordSpacing word-spacing 22 
zIndex z-index 21 


25.35 DOM 中 的 事件 


第 30 章 解释 了 DOM 的 事件 系统 。 有 许多 不 同 的 事件 可 供 使 用 ， 如 表 25-9 所 示 。 
表 25-9 DOM 的 事件 
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名 o P 说 — H8 
blur 在 元 素 失 去 键盘 焦点 时 触发 
click 在 按 下 鼠标 按钮 后 释放 时 触发 
dblclick 在 两 次 按 下 鼠标 按钮 并 释放 时 触发 
focus 在 元 素 获 得 键盘 焦点 时 触发 
focusin 在 元 素 即 将 获得 键盘 焦点 时 触发 
focusout 在 元 素 即 将 失去 键盘 焦点 时 触发 
keydown 在 用 户 按 下 某 个 键 时 触发 
keypress 在 用 户 按 下 某 个 键 并 释放 时 触发 
keyup 在 用 户 释 放 某 个 键 时 触发 
mousedown 在 鼠标 按钮 被 按 下 时 触发 
mouseenter 在 光标 移 人 元 素 或 其 下 属 元 素 所 占据 的 屏幕 区 域 时 触发 
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( 续 ) 
名 称 说 明 
mouseleave 在 光标 移出 元 素 及 其 所 有 下 属 元 素 所 占据 的 屏幕 区 域 时 触发 
mousemove 在 光标 位 于 元 素 上 方 并 移动 时 触发 
mouseout 与 mouseleave 相 似 ， 区 别 是 当 光 标 还 在 下 属 元 素 上 方 时 此 事件 也 会 被 触发 
mouseover 与 mouseenter 相 似 ， 区 别 是 当 光 标 还 在 下 属 元 素 上 方 时 此 事件 也 会 被 触发 
mouseup 在 鼠标 按钮 被 释放 时 触发 
onabort 在 文档 或 资源 的 加 载 过 程 被 中 止 时 触发 
onafterprint 在 用 户 打印 文档 后 触发 
onbeforeprint 在 调用 Window.print() 方 法 之 后 ， 向 用 户 呈 现 打 印 选 项 之 前 触发 
onerror 在 文档 或 资源 载 人 出 错时 触发 
onhashchange 在 地 址 的 锚 〈 并 号 串 ) 部 分 变动 时 触发 
onload 在 文档 或 资源 载 人 完成 时 触发 
onpopstate 触发 时 会 提供 一 个 关联 浏览 器 历史 的 状态 对 象 。 此 事件 的 演示 请 参见 第 26 章 
onresize 在 窗口 大 小 改变 时 触发 
onunload 在 文档 从 窗口 或 浏览 器 中 伸 载 时 触发 
readystatechange 在 readystate 属 性 的 值 改变 时 触发 
reset 在 某 张 表单 被 重 置 时 触发 
submit 在 某 张 表单 被 提交 时 触发 





25.4 小结 


在 这 一 章 里 ,我 提供 了 一 些 DOM 的 上 下 文 背 景 信息 ， 以 及 它 在 HTML 文 档 中 所 扮演 的 角色 。 
我 还 解释 了 DOM 规 范 的 等 级 为 什么 和 主流 浏览 融 实 现 的 功能 关系 不 大 ， 以 及 你 可 以 采取 哪些 不 
同 的 方式 来 确保 自己 依赖 的 DOM 功 能 在 目标 浏览 器 上 可 用 。 但 是 ， 必 须 指出 ， 这 些 方式 都 不 能 
代替 仔细 和 全 面 的 测试 。 

这 一 章 还 列 出 了 一 些 快 速 查询 表 ， 它 们 是 我 在 接 下 来 的 几 章 要 介绍 的 对 象 、 成 员 和 事件 。 


























使 用 Document 对 象 











在 这 一 章 里 , 我 将 向 你 介绍 DOM 的 一 个 关键 组 成 部 分 : Document 对 象 。Document 对 象 是 通 往 
DOM 功 能 的 入 口 ， 它 向 你 提供 了 当前 文档 的 信息 ， 以 及 一 组 可 供 探 索 、 导 航 、 搜 索 或 操作 结构 
与 内 容 的 功能 。 表 26-1 列 出 了 本 章 内 容 概 要 。 


表 26-1 本章 内 容 概要 










































































































































































B) 题 解决 方案 代码 清单 

执行 基本 DOM 任 务 使 用 基本 的 DOM API 功 能 26-1 
获取 文档 信息 使 用 document 元 数据 属性 26-2 
获取 文档 位 置信 息 使 用 document.location 属 性 26-3 
导航 至 某 个 新 文档 修改 Location 对 象 的 某 个 属性 值 26-4、26-5 
读 取 和 写 入 cookie 使 用 document .cookie 属 性 26-6 
判断 浏览 器 处 理 文档 的 进展 情况 使 用 document .readystate 属 性 26-7 
获取 浏览 器 已 实现 的 DOM 功 能 详情 使 用 document .implementation 属 性 26-8 
获取 代表 特定 元 素 类 型 的 对 象 使 用 document 属 性 ， 如 ;images、1links 和 scripts 26-9, 26-10 
在 文档 中 搜索 元 素 fiti FH IA document .getElement 开 头 的 各 种 方法 26-11 

CSS 选 择 融 在 文档 中 搜索 元 素 使 用 document .querySelector 或 document.querySelectorAll 方 法 26-12 
合并 进行 链 式 搜索 以 寻找 元 素 对 之 前 搜索 的 结果 调用 搜索 方法 26-13 
在 DOM 树 中 导航 使 用 文档 /元 素 的 方法 与 属性 ， 如 hasChildNodes() 、firstChild 和 26-14 

astChild 








我 们 通过 全 局 变量 document 访 问 Document 对 象 ， 它 是 浏览 需 为 我 们 创建 的 关键 对 象 之 一 。 
Document 对 象 向 你 提供 文档 的 整体 信息 , 并 让 你 能 够 访问 模型 里 的 各 个 对 象 。 要 了 解 DOM, 最 好 
的 方法 是 从 一 个 例子 开始 。 代 码 清 单 26-1 展 示 的 是 前 一 章 的 示例 文档 , 添加 了 一 段 脚 本 以 演示 某 
些 基 本 的 DOM 功 能 。 


代码 清单 26-1 使 用 Document 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
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«meta name-"description" content-"A simple example"/» 
«/head» 
«body» 
«p id-"fruittext"» 
There are lots of different kinds of fruit - there are over 500 
varieties of «span id-"banana"»banana«/span» alone. By the time we add the 
countless types of apples, oranges, and other well-known fruit, we are faced 
with thousands of choices. 
</p> 
<p id="apples"> 
One of the most interesting aspects of fruit is the 
variety available in each country. I live near London, in an area which is 
known for its apples. 
</p> 
<script> 
document .writeln("<pre>URL: " + document.URL); 
var elems = document.getElementsByTagName("p") ; 
for (var i = 0; i < elems.length; i++) { 
document.writeln("Element ID: " + elems[i].id); 
elems[i].style.border - "medium double black"; 
elems[i].style.padding = "4px"; 








document .write("</pre>"); 
</script> 
</body> 
</html> 


这 段 脚 本 简短 ， 但 它 漂亮 地 集中 了 DOM 的 许多 不 同 用 途 。 下 面 我 将 把 这 段 脚本 分 解 成 一 个 
个 片段 并 解释 它们 的 作用 。 我 们 能 对 Document 对 象 做 的 最 基本 操作 之 一 是 获取 当前 正在 处 理 的 
HTML 文 档 信息 。 这 就 是 脚本 的 第 一 行 所 做 的 : 

document .writeln("<pre>URL: " + document.URL) ; 

在 这 个 例子 中 ,我 读 取 了 document .URL 属 性 的 值 ， 它 返回 的 是 当前 文档 的 URL。 浏 览 器 就 是 
用 这 个 URL 载 入 此 脚本 所 属 文档 的 。 我 会 在 本 章 后 面 的 26.1.1 节 展示 你 能 从 Document 对 象 获取 的 
各 种 不 同 的 信息 片段 。 

这 条 语句 还 调用 了 writeln 方 法 : 

document .writeln("<pre>URL: " + document.URL); 

此 方法 会 将 内 容 附 加 到 HTML 文 档 的 末尾 。 在 这 个 例子 中 ， 我 写 信 了 pre 元 素 的 开始 标签 和 
URL 属 性 的 值 。 这 就 是 一 个 非常 简单 的 修改 DOM 范 例 ， 意 思 是 我 已 经 改变 了 文档 的 结构 。 第 28 章 
会 更 详细 地 介绍 如 何 操作 DOM。 

接 下 来 ， 从 文档 中 选择 了 一 些 元 素 : 

var elems = document.getElementsByTagName("p"); 

有 许多 方法 可 以 用 于 选择 元 素 ， 我 会 在 26.2 节 加 以 解释 。getElementsByTagName 选 择 属 于 某 
一 给 定 类 型 的 所 有 元 素 ， 在 这 个 示例 中 是 p 元 素 。 任 何 包含 在 文档 里 的 p 元 素 都 会 被 该 方法 返回 ， 
并 被 存放 在 一 个 名 为 elems 的 变量 里 。 正 如 之 前 解释 的 , 所 有 元 素 都 是 由 HTMLElement 对 象 代表 的 ， 
它 提供 了 基本 的 功能 以 代表 HTML 元 素 。getElementsByTagName 方 法 返回 的 结果 是 HTMLElement 对 
象 所 组 成 的 一 个 集合 。 
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有 了 可 以 处 理 的 HTMLElement 对 象 集合 之 后 ， 我 使 用 了 一 个 for 循 环 来 列举 集合 里 的 内 容 ， 处 
理 浏览 器 从 HTML 文档 里 找 出 的 各 个 p 元 素 : 
for (var i = 0; i < elems.length; i++) { 
document.writeln("Element ID: " + elems[i].id); 
elems[i].style.border - "medium double black"; 
elems[i].style.padding = "4px"; 
} 


对 集合 里 的 每 个 HTMLELement ， 我 会 读 取 它 的 id 属性 来 获得 id 值 ， 然 后 使 用 document .writeln 
方法 把 结果 附加 到 之 前 生成 的 pre 元 素 的 内 容 上 


for (var i = 0; i < elems.length; i++) { 
document .writeln("Element ID: " + elems[i].id); 
elems[i].style.border = "medium double black"; 
elems[i].style.padding = "4px"; 

} 


id 属性 是 HTMLElement 定 义 的 众多 属性 之 一 。 我 会 在 第 28 章 向 你 展示 其 他 的 属性 。 你 可 以 使 用 
这 些 属性 来 获取 某 个 元 素 的 信息 ， 也 可 以 对 其 进行 修改 (改动 会 同时 应 用 到 它 所 代表 的 HTML 元 
素 上 )。 在 这 个 例子 中 ， 我 使 用 了 style 属 性 来 改变 CSS border 和 padding 属 性 的 值 : 


for (var i = 0; i < elems.length; i++) { 
document .writeln("Element ID: " + elems[i].id); 
elems[i].style.border = "medium double black"; 
elems[i].style.padding = "4px"; 

} 


这 些 改动 为 每 个 元 素 都 创建 了 一 个 内 能 样式 (第 4 章 介 绍 了 内 艇 样式 ), 这 些 元 素 是 你 之 前 用 
getElementsByTagName 方 法 找到 的 。 当 你 修改 某 个 对 象 时 ， 浏 览 器 会 立即 把 改动 应 用 到 对 应 的 元 
素 上 ， 在 这 个 例子 中 是 给 这 些 p 元 素 添 加 内 边 距 和 边框 。 

脚本 的 最 后 一 行 写 人 了 pre 元 素 的 结束 标签 ,就 是 我 在 脚本 开头 初始 化 的 那个 元 素 。 我 用 的 是 
write 方法 ， 它 类 似 于 writeln， 但 不 会 给 添加 到 文档 里 的 字符 串 附 上 行 结束 字符 。 这 两 种 方法 区 
RAK, 除非 你 编写 的 内 容 是 预 格式 化 的 , 或 者 使 用 非 标准 的 空白 处 理 方式 ( 详情 请 参见 第 22 章 )。 

使 用 pre 元 素 就 意味 着 writeln 方 法 所 添加 的 行 结束 字符 会 被 用 来 构建 内 容 。 从 图 26-1 中 可 以 
看 到 文档 排列 的 效果 。 




































































| 
By bample Le — 
€ > Œ Otitan/listings/example.htm uw 


| There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the 


| countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. 

















One of the most interesting aspects of fruit is the variety available in each country. I live near London, in an area 
which is known for its apples. 





URL: http://titan/listings/example.html 
Element ID: fruittext 

| Element ID: apples L 
= = — —") 


图 26-1 ”脚本 在 基本 HTML 文档 里 的 效果 








536 5 26% 4%) Document 对 象 





26.1 使 用 Document 元 数据 


正如 我 在 前 面 一 节 里 解释 的 ，Document 对 象 的 用 途 之 一 是 向 你 提供 
介绍 了 你 可 以 用 来 获取 文档 元 数据 的 属性 。 


表 26-2 Document 元 数据 属性 














t 关 于 文档 的 信息 sO 表 26- 2 





















































































































































































































































E 性 说 明 返 回 
characterSet 返回 文档 的 字符 集 编码 。 这 是 一 个 只 读 属 性 字符 串 
charset 获取 或 设置 文档 的 字符 集 编码 字符 串 
compatMode 获取 文档 的 兼容 性 模式 字符 串 
cookie 获取 或 设置 当前 文档 的 cookie 字符 串 
defaultCharset 获取 浏览 器 所 使 用 的 默认 字符 编码 字符 串 
defaultView 返回 当前 文档 的 Window 对 象 ， 此 对 象 的 详细 信息 请 参见 第 27 章 Window 
dir 获取 或 设置 文档 的 文本 方向 字符 串 
domain 获取 或 设置 当前 文档 的 域名 字符 串 
implementation 提供 可 用 DOM 功 能 的 信息 DOMImplementation 
lastModified 返回 文档 的 最 后 修改 时 间 ( 如 果 修 改 时 间 不 可 用 则 返回 当前 时 间 ) 字符 串 
location 提供 当前 文档 的 URL 信 息 Location 
readyState 返回 当前 文档 的 状态 。 这 是 一 个 只 读 属 性 字符 串 
referrer 返回 链接 到 当前 文档 的 文档 URL ( 就 是 对 应 HTTP 标 头 的 值 ) 字符 串 
title 获取 或 设置 当前 文档 的 标题 ( 即 title 元 素 的 内 容 ， 参 见 第 7 章 ) 字符 串 














26.1.1 获取 文档 信息 











你 可 以 通过 使 用 元 数据 属性 来 获得 一 些 有 用 的 文档 信息 ， 如 代码 清单 26-2 所 示 。 











代码 清单 26-2 使 用 Document 元 素来 获取 元 数据 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«/head» 
«body» 
«script» 
document . writeln("«pre»"); 
document.writeln("characterSet: " + document.characterSet); 
document.writeln("charset: " 4 document.charset); 
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n" 


document.writeln("compatMode: " + document.compatMode); 
document.writeln("defaultCharset: " 4 document.defaultCharset); 
document.writeln("dir: " + document.dir); 
document.writeln("domain: " 4 document.domain); 
document.writeln("lastModified: " + document.lastModified); 
document.writeln("referrer: " 4 document.referrer); 
document.writeln("title: " 4 document.title); 


document .write("«/pre»"); 
«/script» 
</body> 
</html> 
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li Example 
€ Q | © titan/listings/example.htm wow 





characterSet: ISO-8859-1 

charset: ISO-8859-1 

compatMode: CSSiCompat 

defaultCharset: ISO-8859-1 

dir: | 
domain: titan 

lastModified: 10/16/2011 18:10:28 

referrer: 

title: Example 


























图 26-2 文档 的 基本 信息 








理解 怪异 模式 

compatMode 属 性 告诉 你 浏览 器 是 如 何 处 理 文档 内 容 的 。 现 如 今 存在 着 大 量 的 非 标准 HTML， 
浏览 器 则 试图 显示 出 这 类 网 页 ， 哪 怕 它 们 并 不 遵循 HTML 规范。 一 些 这 样 的 内 容 依赖 于 浏览 器 的 
独特 功能 , 而 这 些 功 能 来 源 于 浏览 器 依靠 自身 特点 ( 而 非 遵循 标准 ) 进 行 竞争 的 年 代 。compatMode 
属性 会 返回 两 个 值 中 的 一 个 ， 如 表 26-3 所 示 。 


表 26-3 ”compatMode 属 性 的 值 


值 说 明 
CSS1Compat ”此 文档 遵循 某 个 有 效 的 HTML 规 范 (但 不 必 是 HTML5， 有 效 的 HTML4 文 档 也 会 返回 这 个 值 ) 
BackCompat ”此 文档 含有 非 标准 的 功能 ,已 触发 怪异 模式 



























































26.1.2 ”使 用 Location 对 象 


document.location 属 性 返回 一 个 Location 对 象 ， 这 个 对 象 给 你 提供 了 细 粒 度 的 文档 地 址 信 


H 


息 ， 也 允许 你 导航 到 其 他 文档 上 。 表 26-4 介 绍 了 Location 对 象 里 的 函数 和 属性 。 
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538 ”第 26 章 使 用 Document 对 象 
表 26-4 ”Location 对 象 的 方法 和 属性 

属 性 说 明 ik E 
protocol 获取 或 设置 文档 URL 的 协议 部 分 字符 串 
host 获取 或 设置 文档 URL 的 主机 和 端口 部 分 字符 串 
href 获取 或 设置 当前 文档 的 地 址 字符 串 
hostname 获取 或 设置 文档 URL 的 主机 名 部 分 字符 串 
port 获取 或 设置 文档 URL 的 端口 部 分 字符 串 
pathname 获取 或 设置 文档 URL 的 路 径 部 分 字符 串 
search 获取 或 设置 文档 URL 的 查询 ( 问号 串 ) 部 分 字符 串 
hash 获取 或 设置 文档 URI 的 锚 ( 井 号 串 ) 部 分 字符 串 
assign(<URL>) 导航 到 指定 的 URL 上 void 
replace(<URL>) 清除 当前 文档 并 导航 到 URL 所 指定 的 那个 文档 void 
reload() 重新 载 和 当前 的 文档 void 
resolveURL (<URL>) 将 指定 的 相对 URL 解 析 成 绝对 URL FIFE 


document .Location 属性 最 简单 的 用 途 是 获取 当前 文档 的 地 址 信 


HUS 5 





























代码 清单 26-3 ”使 用 Location 对 象 来 获取 文档 信息 


<!DOCTYPE HTML> 
<html> 


search) 


的 值 。 


<head> 


<title>Example</title> 

<meta name="author" content="Adam Freeman"/> 

«meta name-"description" content-"A simple example"/> 
«/head» 


«body» 


«script» 


document 


document 
document 


document 


«/script» 
«/body» 
</html> 

















会 返回 URL 的 查询 字符 串 部 分 ，hash 属 
Ñ Location J& TE st http: //titan/listings/example.html?query-apples 


.writeln("«pre»") 


-writeln("protoco 
.writeln("host: " 
document. 
document. 
document. 
document. 
document. 


writeln("hostnam 
writeln("port: " 
writeln("pathnam 
writeln("search: 
writeln("hash: " 


.write("«/pre»"); 


B 


q^ 
* document.location.host); 
e: " 
+ 
e: 


document. location. port) ; 


+ document. location.hash) ; 











WW 
Mm) 
— 





=I 








如 代码 清单 26-3 所 示 。 


+ document.location.protocol); 
+ document.location.hostname); 


+ document. location. pathname); 
+ document. location.search) ; 


生 返 回 的 则 是 URE 片 段 。 图 26-3 展 示 了 各 














apples 这 个 URL 所 返回 
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[ LII) 
© Example x We 
€ Q | Q titan/listings/example.htm!?query=apples#apples wo 





protocol: http: 

host: titan | 
hostname: titan 

port: | 
pathname: /liscings/example.htmi 

search: ?query=apples 
hash: #apples 
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图 26-3 ”用 Location 对 象 来 获取 信息 





























提示 请 注意 当 端 口号 为 HTTP 默 认 的 80 时 ， 属 性 不 会 返回 值 。 


使 用 Location 对 象 导航 到 其 他 地 方 
你 还 可 以 使 用 Location 对 象 ( 通过 document .location 属 性 ) 来 导航 到 其 他 地 方 。 具 体 的 实现 
方式 有 好 几 种 。 首 先 ， 可 以 为 之 前 示例 用 到 的 某 个 属性 指派 新 值 ， 如 代码 清单 26-4 所 示 。 


代码 清单 26-4 ”通过 给 某 个 Location 属 性 指派 新 值 来 导航 到 另 一 个 文档 上 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«/head» 
«body» 
«p» 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<button id="pressme">Press Me</button> 
<p> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 








</p> 
<img id-"banana" src-"banana-small.png" alt-"small banana"/> 
«script» 
document.getElementById("pressme").onclick = function() { 
document.location.hash - "banana"; 
} 


</script> 
</body> 
</html> 
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这 个 例子 包含 了 一 个 button 元 素 ， 当 它 被 点 击 时 会 给 document .location.hash 属 性 指派 一 个 
新 值 。 我 通过 一 个 事件 把 按钮 和 点 击 时 执行 的 JavaScript 函 数 关联 起 来 。 这 就 是 onclick 属 性 的 作 
用 ， 你 可 以 在 第 30 章 里 了 解 事件 的 更 多 信息 


Co 


这 一 改动 会 让 浏览 器 导 航 到 某 个 id 属 性 值 匹配 hash 值 的 元 素 上 ， 在 这 个 案例 里 是 img 元 素 。 
从 图 26-4 可 以 看 到 导航 的 效果 。 
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EL x 
© Example WE f à 
| € > C Otitan/listings/examr] / © Sample = x 
| € Q |© titan/listings/example.html#banana w A 
There are lots of different kinds of fruit 4 


LUNGUL, HI CHI aCe WENCH 13 Row GUT Xts aprpies- 


| time we add the countless types of app 
| with thousands of choices. 


| 
| (Presse) | 


| 
One of the most interesting aspects of frj | | 


London, in an area which is known for | When travelling in Asia, I was struck by how many different kinds of banana were available - | 
SSS many of which had unique flavours and which were only avaiable within a small region. 


iL M | 
图 26-4 ”使 用 Location 对 象 进行 导航 


虽然 我 只 是 导航 到 了 相同 文档 的 不 同位 置 , 但 也 可 以 用 Location 对 象 的 属性 来 导航 到 其 他 文 


档 , 不 过 , 这 种 做 法 通常 是 用 href 属 性 实现 的 , 因为 你 可 以 设置 完整 的 URL。 也 可 以 使 用 Location 
对 象 定义 的 一 些 方法 。 


assign 和 replace 方 法 的 区 别 在 于 ，replace 会 把 当前 文档 从 浏览 器 历史 中 移 除 ， 这 就 意味 着 


如 果 用 户 点 击 了 后 退 按钮 ,浏览 器 就 会 跳 过 当前 文档 ， 就 像 它 从 未 访问 过 该 文档 一 样 。 代 码 清 
单 26-5 展 示 了 如 何 使 用 assign 方 法 。 










































































代码 清单 26-5 ”使 用 Location 对 象 的 assign 方 法 进行 导航 





<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
«meta name-"author" content-"Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«/head» 
«body» 
«button id-"pressme"»Press Me«/button» 
«script» 
document.getElementById("pressme").onclick = function() { 
document.location.assign("http://apress.com"); 
«/script» 
</body> 
</html> 


当 用 户 点 击 button 元 素 时 ,浏览 融会 导航 到 指定 的 URL 上， 在 这 个 示例 中 是 
http://apress.com. 
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26.1.3 iE RIS A cookie 
cookie 属 性 让 你 可 以 读 取 、 添 加 和 更 新 文档 所 关联 的 cookie。 代 码 清单 26-6 对 此 进行 了 演示 。 
代码 清单 26-6 读 取 和 创建 cookie 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«/head» 
«body» 
«p id-"cookiedata"» 














</p> 
«button id-"write"»Add Cookie</button> 
«button id-"update"»Update Cookie«/button» 
«script» 





var cookieCount - 0; 

document .getElementById("update").onclick = updateCookie; 
document.getElementById("write").onclick = createCookie; 
readCookies(); 


function readCookies() { 
document .getElementById("cookiedata").innerHTML = document. cookie; 
} 


function createCookie() { 
cookieCount++5 
document.cookie = "Cookie_ 
readCookies(); 


+ cookieCount + "=Value_" + cookieCount; 


} 


function updateCookie() { 
document.cookie = "Cookie_" + cookieCount + "=Updated_" + cookieCount; 
readCookies(); 


} 
</script> 
</body> 
</html> 


cookie 属 性 的 工作 方式 稍微 有 点 古怪 。 当 你 读 取 该 属性 的 值 时 ， 会 得 到 与 文档 相关 联 的 所 有 
cookie。cookie 是 形式 为 name=value 的 名 称 / 值 对 。 如 果 存 在 多 个 cookie,， 那么 cookie 属 性 会 把 它们 
一 起 作为 结果 返回 ， 之 间 以 分 号 相隔 ， 如 name1=value1;name2=value2。 

与 之 相对 ， 当 你 想 要 创建 新 的 cookie 时 ， 要 指派 一 个 新 的 名 称 / 值 对 作为 cookie 属 性 的 值 ， 它 
笑 会 被 添加 到 文档 的 cookie 集 合 。 一 次 只 能 设置 一 个 cookie。 如 果 设 置 的 值 和 现 有 的 某 个 cookie 
具备 相同 的 名 称 部 分 ， 那么 就 会 用 值 部 分 更 新 那个 cookie。 
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为 了 演示 这 一 点 ， 代 码 清单 包含 了 一 段 脚 本 来 读 取 、 创 建 和 更 新 cookie。ireadCookies 函 数 读 





取 document.cookie 属 性 的 值 ， 并 将 结果 设置 为 某 个 段落 (p) 元 素 的 


这 个 文档 里 有 两 个 button 元 素 。 当 Add Cookie 按 钮 被 点 击 时 ， 








C 








BH 
数 。 这 个 函数 给 某 个 现 有 的 cookie 提 供 一 个 新 值 。 从 图 26-5 可 以 看 到 这 


对 所 发 生 的 一 切 有 亲身 感受 ， 建 议 你 加 载 这 个 文档 实际 操作 一 下 。 





指派 一 个 新 值 ， 这 个 值 会 被 添加 到 cookie 集 合 中 。Update Cookie 按 钮 会 


内 容 。 

reateCookiePK ZZ: Z8 cookie 
Ha] jupdateCookiePWR 
不 过 为 了 





这 段 脚 本 的 效果 
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ay Example 
B Examp 


E3117) 





€ © Q titan/listings/example.html 


Cookie 1-Value 1: Cookie_2=Updated_2: Cookie 3-Value 3 





| 
| | Add Cookie | | Update Cookie | 
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图 26-5 ”添加 和 更 新 cookie 

































































在 这 个 示例 中 ,我 添加 了 三 个 cookie， 其 中 一 个 已 经 被 更 新 为 某 个 新 值 。 虽 然 添 加 cookie 的 
默认 形式 是 name=value， 但 你 可 以 额外 应 用 一 些 数据 来 改变 cookie 的 处 理 方式 。 表 26-5 介 绍 了 这 
些 额 外 数据 。 

表 26-5 ”可 以 添加 到 cookie 的 额外 字段 
额 外 项 说 明 

path=<path> 设置 cookie 关 联 的 路 径 ， 如 果 没 有 指定 则 默认 使 用 当前 文档 的 路 径 

domain=<domain> 设置 cookie 关 联 的 域名 ， 如 果 没 有 指定 则 默认 使 用 当前 文档 的 域名 

max-age=<seconds> 设置 cookie 的 有 效 期 ， 以 秒 的 形式 从 它 创建 之 时 起 开始 计算 

expires=<date> 设置 cookie 的 有 效 期 ， 用 的 是 GMT 格 式 的 日 期 

secure 只 有 在 安全 (HTTPS) 连接 时 才 会 发 送 cookie 





这 些 额 外 的 项 目 可 以 被 附加 到 名 称 / 值 对 的 后 面 ， 以 分 号 


document.cookie = "MyCookie-MyValue;max-age-10"; 





26.1.4 理解 就 绪 状 态 


分 隔 ， 就 像 这 样 : 





document .readyState 属 性 向 你 提供 


了 加 载 和 解析 HTML 文 档 过 程 中 当前 处 于 哪个 阶段 的 信 


Ho WWIE, TEE 
使 用 defer 属 性 ( 








第 30 章 详细 介 
户 操 作 的 反馈 。 


站 绍 的 ), bep 





o ne 脚本 ， 但 你 可 以 
在 第 7 章 介绍 过 ) 推迟 脚本 的 执行 。 正 如 我 们 在 一 些 例 子 中 所 见 到 的 ( 以 及 将 在 
有 JavaScript 的 事件 系统 来 独立 执行 各 个 渔 数 ， 作 为 对 文档 变化 或 用 
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在 所 有 这 些 情况 下 ， 了 解 浏 








览 器 加 载 和 处 理 HTML 到 了 哪个 阶段 可 能 


属性 会 返回 三 个 不 同 的 值 ， 如 表 26-6 所 示 。 


表 26-6 ”readyState 属 性 返回 的 值 





会 很 有 用 。readystate 





























ff » 明 
loading 浏览 器 正在 加 载 和 处 理 此 文档 

interactive 文档 已 被 解析 ， 但 浏览 器 还 在 加 载 其 中 链接 的 资源 ( 图像 和 媒体 文件 等 ) 
complete 文档 已 被 解析 ， 所 有 的 资源 也 已 加 载 完毕 











随 着 浏览 器 逐步 加 载 和 处 理 文档 ，readystate 属 性 的 值 从 lo0ading 转 为 interactive， 再 转 为 
complete。 这 个 属性 和 readystatechange 事 件 结合 使 用 时 用 处 最 大 ， 该 事件 会 在 每 次 readyState 



































两 个 事件 和 属性 来 完成 一 项 常见 任务 。 
代码 清单 26-7 使 用 文档 就 绪 状 态 来 推迟 脚本 的 执行 





<!DOCTYPE HTML> 
«html» 

«head» 

<title>Example</title> 


<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 





<script> 


document .onreadystatechange = function() { 
if (document.readyState == "interactive") { 
document.getElementById("pressme").onclick = function() { 
document.gettlementById("results").innerHTML = "Button Pressed"; 


} 
} 
} 
</script> 
</head> 
<body> 


<button id="pressme">P 
<pre id="results"></pr 
</body> 
</html> 





这 段 脚本 使 用 文档 就 绪 状态 来 推迟 一 个 函数 的 执行 ， 


代码 要 求 能 够 找到 在 脚本 执行 时 


ress Me</button> 
e» 





届 性 的 值 发 生变 化 时 触发 。 我 会 在 第 30 章 解释 事件 ,但 代码 清单 26-7 向 你 展示 了 如 何 同时 使 用 这 


直到 文档 进入 interactive 阶 段 。 脚 本 


尚未 被 浏览 器 载 人 的 文档 元 素 。 通 过 推迟 脚本 执行 直至 文档 加 载 

















完成 ， 我 就 能 够 确定 这 些 元 素 是 可 以 找到 的 。 这 种 方式 可 以 作为 把 script 元 素 放 到 文档 末尾 的 替 
代 。 我 会 在 26.2 节 解释 如 何 寻找 元 素 ， 在 第 30 音 解释 如 何 使 用 事件 。 


26.1.5 获取 DOM 的 实现 





document .implementation 属 











情况 


盟 性 向 你 提供 了 浏览 器 对 DOM 功 能 的 实现 信息 





Dol 


这 个 属性 返回 一 个 
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DOMImplementation 对 象 ， 它 包含 一 个 你 会 感 兴趣 的 方法 : hasFeature 方 法 。 可 以 使 用 这 个 方法 来 
判断 哪些 DOM 功 能 已 实现 ， 如 代码 清单 26-8 所 示 。 


代码 清单 26-8 使 用 document .implementation.hasFeature 方 法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«/head» 
«body» 
«script» 


var features - ["Core", "HTML", "CSS", "Selectors-API"]; 
var levels = ["1.0", "2.0", "3.0"]; 


document .writeln("<pre>"); 
for (var i = 0; i < features.length; i++) { 
document.writeln("Checking for feature: " + features[i]); 
for (var j = 0; j « levels.length; j++) { 
document.write(features[i] + " Level " + levels[j] + ": "); 
document .writeln(document.implementation.hasFeature(features[i], 
levels[j])); 
j 
} 
document .write("</pre>") 
</script> 
</body> 
</html> 


这 段 脚 本 检测 了 若干 不 同 的 DOM 功 能 ， 以 及 所 定义 的 功能 等 级 。 它 并 不 像 看 上 去 那么 有 用 。 
首先 , 浏览 器 并 不 总 是 能 正确 报告 它们 实现 的 功能 。 某 些 功 能 实现 并 不 会 通过 hasFeature 方 法 进 
行 报告 ,而 男 一 些 报告 了 却 根 本 没有 实现 。 其 次 , 浏览 器 报告 了 某 项 功能 并 不 意味 着 它 的 实现 方 
式 是 有 用 的 。 虽 然 这 个 问题 不 如 以 前 严重 ， 但 DOM 的 实现 是 存在 一 些 差 别 的 。 

如 果 你 打算 编写 能 在 所 有 主流 浏览 需 上 工作 的 代码 (你 也 应 该 这 么 想 )， 那 么 hasFeature 
方法 的 用 处 不 大 。 你 应 该 选择 在 测试 阶段 全 面 检查 代码 ,在 需要 的 时 候 测 试 支持 情况 和 备用 措 
施 ， 同 时 也 可 以 考虑 使 用 某 个 JavaScript 库 (例如 jQuery )， 它 可 以 帮助 消除 不 同 DOM 实 现 之 间 
的 差别 。 


26.2 ”获取 HTML 元 素 对 象 


Document 对 象 的 一 大 关键 功能 是 作为 一 个 人 口 ， 让 你 能 访问 代表 文档 里 各 个 元 素 的 对 象 。 可 
以 用 几 种 不 同 的 方法 来 执行 这 个 任务 。 有 些 属 性 会 返回 代表 特定 文档 元 素 类 型 的 对 象 , 有 些 方法 
能 让 你 很 方便 地 运用 条 件 搜索 来 找到 匹配 的 元 素 ， 还 可 以 将 DOM 视 为 一 棵 树 并 沿 着 它 的 结构 进 
行 导 航 。 在 下 面 的 几 节 里 ， 我 会 介绍 这 些 技巧 。 
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提示 显而易见， 获取 这 些 对 象 的 目的 是 对 它们 做 一 些 有 趣 的 事 。 我 会 在 第 38 章 介绍 如 何 使 用 
这 些 对 象 ， 其 中 会 介绍 HTMLElement 对 象 的 功能 。 


26.2.1 使 用 属性 获取 元 素 对 象 


Document 对 象 为 你 提供 了 一 组 属性 ， 它 们 会 返回 代表 文档 中 特定 元 素 或 元 素 类 型 的 对 象 。 
表 26-7 概 述 了 这 些 属 性 。 








表 26-7 Document 对 象 的 元 素 属性 


























































































































属 性 说 明 ig E 
activeElement 返回 一 个 代表 当前 带 有 键盘 焦点 元 素 的 对 象 HTMLElement 
body 返回 一 个 代表 body 元 素 的 对 象 HTMLElement 
Embeds 返回 所 有 代表 embed 元 素 的 对 象 HTMLCollection 
plugins 
forms 返回 所 有 代表 form 元 素 的 对 象 HTMLCollection 
head 返回 一 个 代表 head 元 素 的 对 象 HTMLHeadElement 
images 返回 所 有 代表 :img 元 素 的 对 象 HTMLCollection 
links 返回 所 有 代表 文档 里 具备 href 属 性 的 3 和 area 元 素 的 对 象 HTMLCollection 
scripts 返回 所 有 代表 script 元 素 的 对 象 HTMLCollection 
表 26-7 里 描述 的 大 多 数 属性 都 返回 一 个 HTMLCollection 对 象 DOM 就 是 用 这 种 方式 来 表示 一 

组 代表 元 素 的 对 象 集合 。 代 码 清 单 26-9 演 示 了 访问 集合 内 对 象 的 两 种 方法 。 


代码 清单 26-9 使 用 HTMLCollection 对 象 
<!DOCTYPE HTML> 


<html> 

<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 

pre (border: medium double black; } 

</style> 

</head> 

<body> 


<pre id="results"></pre> 

<img id-"lemon" src-"lemon.png" alt-"lemon"/» 

«p» 

There are lots of different kinds of fruit - there are over 500 varieties 

of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 
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<img id="apple" src="apple.png" alt="apple"/> 

<p> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 


</p> 
<img id="banana" src="banana-small.png" alt="small banana"/> 
<script> 

var resultsElement = document.getElementById("results"); 


var elems = document. images; 


for (var i = 0; i < elems.length; i++) { 
resultsElement.innerHTML += "Image Element: " + elems[i].id + "\n"; 
} 


var srcValue = elems.namedItem("apple").src; 
resultsElement.innerHTML += "Src for apple element is: " + srcValue + "\n"; 
</script> 
</body> 
</html> 


第 一 种 使 用 HTMLCollection 对 象 的 方法 是 将 它 视 为 一 个 数组 。 它 的 length 属 性 会 返回 集合 里 
的 项 目 数量 , 它 还 支持 使 用 标准 的 JavaScript 数 组 索引 标记 (element[i] 这 种 表示 法 ) 来 直接 访问 
集合 里 的 各 个 对 象 。 这 就 是 我 在 示例 里 用 的 第 一 种 方法 , 在 此 之 前 我 已 经 用 document.images 属 性 
获得 了 一 个 HTMLCollection， 它 包含 了 所 有 代表 文档 里 img 元 素 的 对 和 象 。 























提示 “请 注意 我 使 用 了 innerHTML 属 性 来 设置 pre 元 素 的 内 容 。 我 会 在 第 38 章 更 为 详细 地 解释 这 个 
属性 。 











第 二 种 方法 是 使 用 namedItem 方 法 ， 它 会 返回 集合 里 带 有 指定 id 或 name 属 性 值 (如 果 有 的 话 ) 
的 项 目 。 这 就 是 我 在 示例 中 用 的 第 二 种 方法 ,我 使 用 了 namedItenm 方 法 来 获取 代表 某 个 特定 img 元 
素 的 对 象 ， 该 元 素 的 id 属性 值 为 apple。 


























提示 “请 注意 我 读 取 了 其 中 一 个 对 象 的 STC 属 性 值 。 这 个 属性 由 HTMLImageElement 对 象 实 现 ， 后 
者 被 用 于 代表 img 元 素 。 我 会 在 第 31 章 里 更 为 详细 地 解释 这 种 类 型 的 对 象 。 我 使 用 的 另 一 
个 属性 (id) 是 HTMLElement 的 一 部 分 ， 因 此 对 所 有 类 型 的 元 素 都 可 用 。 


26.2.2 ”使 用 数组 标记 获取 已 命名 元 素 


还 可 以 使 用 数组 风格 的 标记 来 获取 代表 某 个 已 命名 元 素 ( named element ) 的 对 象 。 它 指 的 是 
带 有 id 或 name 属 性 值 的 元 素 。 代 码 清 单 26-10 提 供 了 一 个 例子 。 
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代码 清单 26-10 ”获取 已 命名 元 素 的 对 象 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pre (border: medium double black; } 
</style> 
</head> 
<body> 
<pre id="results"></pre> 
<img id-"lemon" name="image" src-"lemon.png" alt-"lemon"/» 
«p» 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<img id="apple" name="image" src="apple.png" alt="apple"/> 
<p> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 





its apples. 
</p> 
<img id="banana" src="banana-small.png" alt="small banana"/> 
<script> 


var resultsElement = document.getElementById("results"); 
var elems = document["apple"]; 


if (elems.namedItem) { 
for (var i = 0; i < elems.length; i++) { 
resultsElement.innerHTML += "Image Element: 
} 


} else { 
resultsElement.innerHTML += "Src for element is: 
} 


</script> 
</body> 
</html> 


可 以 看 到 , 我 使 用 了 数组 风格 的 索引 标记 来 获取 代表 某 个 id 值 为 apple 元 素 的 对 象 。 用 这 种 方 
法 获取 元 素 的 特别 之 处 在 于 , 根据 文档 内 容 或 元 素 排列 顺序 的 不 同 , 可 能 会 得 到 不 同 种 类 的 结果 。 
浏览 器 以 深度 优先 ”( depth-first ) 的 顺序 看 待 文档 里 的 所 有 元 素 ， 尝 试 将 id 或 name 属 性 与 指 
定 的 值 进行 匹配 。 如 果 第 一 次 匹配 到 的 是 一 个 id 属 性 ， 那 么 浏览 器 就 会 停止 搜索 ( 因为 id 值 在 文 


+ elems[i].id + "\n"; 


+ elems.src + "An"; 














ul 

















CD 深度 优先 是 一 种 遍历 或 搜索 树 形 结构 的 算法 。 它 从 “根部 ”开始 ， 沿 着 各 个 分 支 走 得 尽 可 能 远 ， 然 后 才 会 进行 
湖 。 一 一 译 者 注 
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档 里 必须 是 唯一 的 ) 并 返回 一 个 代表 匹配 元 素 的 HTMLElement 对 象 。 
如 果 第 一 次 匹配 到 的 是 一 个 name 属 性 值 , 那么 你 将 得 到 的 或 者 是 一 个 HTMLElement ( 如 果 只 有 
一 个 匹配 的 元 素 )， 或 者 是 一 个 HTMLCollection ( 如 果 有 不 止 一 个 匹配 的 元 素 )。 浏 览 器 开始 匹配 
name 值 后 就 不 会 再 匹配 id 值 了 。 
可 以 看 到 ， 我 把 namedItem 属 性 当做 一 项 测试 来 判断 得 到 的 是 哪 一 种 结果 。 在 这 个 例子 里 得 
到 的 是 一 个 HTMLElement ， 因 为 我 指定 的 值 匹配 了 一 个 id 值 。 















































提示 也 可 以 将 已 命名 元 素 视 为 属性 。 举 个 例子 ，document[apple] 和 document.apple 的 意思 是 
一 样 的 。 笔 者 偏爱 使 用 点 表达 式 ， 因 为 它 能 更 清楚 地 表现 出 我 正在 尝试 获取 元 素 对 象 ， 
不 过 这 只 是 个 人 喜好 问题 。 


26.2.3 ”搜索 元 素 
Document 对 象 定义 了 许多 方法 ， 可 以 用 它们 搜索 文档 里 的 元 素 。 表 26-8 介 绍 了 这 些 方法 。 


表 26-8 寻找 元 素 的 Document 方 法 


















































属 性 说 — HB ik E 
getElementById(<id>) 返回 带 有 指定 id 值 的 元 素 HTMLElement 
getElementsByClassName(«class») 返回 带 有 指定 class 值 的 元 素 HTMLElement[] 
getElementsByName («name») 返回 带 有 指定 name 值 的 元 素 HTMLElement[] 
getElementsByTagName(<tag>) 返回 指定 类 型 的 元 素 HTMLElement[ ] 
querySelector (<selector>) 返回 匹配 指定 CSS 选 择 器 的 第 一 个 元 素 HTMLElement 
querySelectorAll(«selector») 返回 匹配 指定 CSS 选 择 器 的 所 有 元 素 HTMLElement[] 











正如 你 可 能 预计 的 那样 , 这 些 方法 中 的 一 些 会 返回 多 个 元 素 。 我 在 表 里 将 它们 展现 为 返回 一 
个 HTMLElement 对 象 数组 , 但 严格 来 说 并 非 如 此 。 事 实 上 ， 这些 方 法 返回 一 个 NodeList, 它 是 底层 
DOM 规 范 的 一 部 分 ， 处 理 的 是 通用 结构 文档 格式 ， 而 不 仅仅 是 HTML。 但 是 ， 对 这 些 用 途 而 言 ， 
你 可 以 将 它们 视 为 数组 ， 把 注意 力 集中 在 HTML5 上 。 

这 些 搜 索 方 法 可 以 被 分 成 两 类 。 代 码 清单 26-11 演 示 了 其 中 的 第 一 类 ， 即 名 称 由 getElement 
开头 的 那些 方法 。 


代码 清单 26-11 使 用 document .getElement 开 头 的 方法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 











e 
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<style> 
pre (border: medium double black; } 

</style> 
</head> 
<body> 

<pre id="results"></pre> 

<img id-"lemon" class-"fruits" name-"apple" src-"lemon.png" alt-"lemon"/» 

«p» 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<img id-"apple" class-"fruits images" name="apple" src="apple.png" alt="apple"/> 
<p> 

One of the most interesting aspects of fruit is the variety available in 

each country. I live near London, in an area which is known for 





its apples. 
</p> 
<img id="banana" src="banana-small.png" alt="small banana"/> 
<script> 


var resultsElement = document.getElementById("results"); 


var pElems = document.getElementsByTagName("p") ; 
resultsElement.innerHTML += "There are " + pElems.length + " p elements in"; 


var fruitsElems - document.getElementsByClassName("fruits"); 
resultsElement.innerHTML += "There are " + fruitsElems.length 


+ " elements in the fruits class\n"; 





var nameElems - document.getElementsByName("apple"); 
resultsElement.innerHTML += "There are " + nameElems.length 
* " elements with the name 'apple'"; 
«/script» 
«/body» 


</html> 

这 些 方法 的 功能 跟 你 预料 得 差不多 ， 而 且 你 只 需 记 住 一 种 行为 。 在 使 用 getElementById 方 法 
时 ， 如 果 找 不 到 带 有 指定 id 值 的 元 素 ， 浏 览 器 就 会 返回 nul1。 与 之 相对 ， 其 他 的 方法 总 是 会 返回 
一 个 HTMLElement 对 象 数组 ， 但 如 果 找 不 到 匹配 ，length 属 性 就 会 返回 0。 

用 CSS 选 择 器 进行 搜索 

使 用 CSS 选 择 器 是 一 种 有 用 的 蔡 代 性 搜索 方式 。 选 择 器 让 你 可 以 在 文档 里 找到 范围 更 广 的 元 
素 。 我 在 第 17 章 和 第 18 章 介绍 了 CSS 选 择 器 。 代 码 清单 26-12 演 示 了 用 这 种 方式 获取 元 素 对 象 。 


代码 清单 26-12 ”使 用 CSS 选 择 器 获取 元 素 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 






























































550 5 26% 4%) Document 对 象 





<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<style> 
pre (border: medium double black; } 
</style> 
</head> 
<body> 
<pre id="results"></pre> 
«img id-"lemon" class-"fruits" name-"apple" src-"lemon.png" alt-"lemon"/» 
«p» 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
«img id="apple" class="fruits images" name-"apple" src="apple.png" alt-"apple"/» 
<p> 








One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 


</p> 
<img id="banana" src="banana-small.png" alt="small banana"/> 
<script> 

var resultsElement = document.getElementById("results"); 


var elems = document.querySelectorAll("p, img#apple") 
resultsElement.innerHTML += "The selector matched ”+ elems. length 
+ " elements\n"; 
</script> 
</body> 


</html> 
我 在 这 个 例子 里 使 用 了 一 个 选择 器 ， 它 会 匹配 所 有 的 p 元 素 和 id 值 为 apple 的 img 元 素 。 用 其 他 
document 方 法 很 难 达 到 同样 的 效果 , 而 且 我 发 现 自己 使 用 选择 器 的 比例 要 高 于 使 用 getElement 方 法 。 


26.2.4 合并 进行 链 式 搜索 


DOM 的 一 个 实用 功能 是 几乎 所 有 Document 对 象 实现 的 搜索 方法 同时 也 能 被 HTMLElement 对 象 
实现 (一 个 例外 )， 这 让 你 可 以 合并 进行 链 式 搜索 。 唯 一 的 例外 是 getElementById 方 法 ， 只 有 
Document 对 象 才能 使 用 它 。 代 码 清单 26-13 演 示 了 链 式 搜索 。 


代码 清单 26-13 合并 进行 链 式 搜索 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pre (border: medium double black; } 

«/style» 
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</head> 
<body> 
<pre id="results"></pre> 
<p id="tblock"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of <span id="banana">banana</span> alone. By the time we add the countless 
types of <span id="apple">apples</span>, 
«span-"orange"»oranges«/span-"orange"», and other well-known fruit, we are 
faced with thousands of choices. 
</p> 
<script> 
var resultsElement = document.getElementById("results"); 


resultsElement.innerHTML += "There are " + elems.length + " span elements\n"; 


var elems = document.getElementById("tblock").getElementsByTagName("span") ; cem 





var elems2 - document.getElementById("tblock").querySelectorAll("span"); 
resultsElement.innerHTML += "There are " + elems2.length 


* " span elements (Mix)\n"; 


var selElems = document.querySelectorAll("#tblock > span"); 
resultsElement.innerHTML += "There are " + selElems.length 


+ " span elements (CSS)\n"; 








«/script» 
</body> 
</html> 


这 个 例子 里 有 两 次 链 式 搜索 ， 这 两 次 都 从 getElementById 方 法 开始 〈 它 会 返回 之 后 进行 处 理 
的 单个 对 象 )。 在 第 一 个 例子 中 , 我 用 getElementsByTagName 方 法 链接 了 一 个 搜索 , 在 第 二 个 例子 
中 则 通过 querySelectorA11 方 法 使 用 了 一 个 非常 简单 的 CSS 选 择 器 。 这 些 例子 都 返回 了 一 个 span 
元 素 的 集合 ， 它 们 都 位 于 id 为 tblock 的 p 元 素 之 内 。 

当然 ， 也 可 以 通过 单独 给 Document 对 象 应 用 CSS 选 择 器 方法 来 实现 同样 的 效果 ( 正如 我 在 示 
例 的 第 三 部 分 所 展示 的 )， 但 是 这 一 功能 在 某 些 情况 下 会 很 方便 ， 比 如 处 理由 脚本 中 的 其 他 函数 
(或 第 三 方 脚本 ) 所 生成 的 HTMLElement 对 象 。 从 图 26-6 可 以 看 到 这 些 搜索 的 结果 。 
| me EET) 
J By Example E 
| € CO titan/listings/example.htm XA 














here are 2 span elements 
here are 2 span elements (Mix) 
here are 2 span elements (CSS) 


There are lots of different kinds of fruit - there are over 500 varieties of 
banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 


























图 26-6 合并 进行 链 式 搜索 
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26.3 在 DOM 树 里 导航 


男 一 种 搜索 元 素 的 方法 是 将 DOM 视 为 一 ， 然 后 在 它 ORES me 所 有 的 DOM 对 
象 都 支持 一 组 属性 和 方法 来 让 我 们 做 到 这 一 点 ， 表 26-9 对 它们 进行 


#26-9 navigation 属性 和 方法 







































































E 性 说 — HB iR [s] 
childNodes 返回 子 元 素 组 HIMLElement[] 
firstChild 返回 第 一 个 子 元 素 HTMLElement 
hasChildNodes() 如 果 当 前 元 素 有 子 元 素 就 返回 true 布尔 值 
lastChild 返回 倒数 第 一 个 子 元 素 HTMLElement 
nextSibling 返回 定义 在 当前 元 素 之 后 的 兄弟 元 素 HTMLElement 
parentNode 返回 父 元 素 HTMLElement 
previousSibling 返回 定义 在 当前 元 素 之 前 的 兄弟 元 素 HTMLElement 


代码 清单 26-14 展 示 了 一 段 脚 本 ， 它 能 让 你 导航 到 文档 各 处 ， 并 在 一 个 pre 元 素 里 显示 当前 所 
选 元 素 的 信息 。 


代码 清单 26-14 ”在 DOM 树 里 导航 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
pre (border: medium double black; } 
«/style» 
«/head» 
«body» 
«pre id-"results"»«/pre» 
«p id-"tblock"» 
There are lots of different kinds of fruit - there are over 500 varieties 
of «span id-"banana"»banana«/span» alone. By the time we add the countless 
types of «span id="apple">apples</span>, 
«span-"orange"»oranges«/span-"orange"», and other well-known fruit, we are 
faced with thousands of choices. 
</p> 
«img id="apple" class-"fruits images" name="apple" src="apple.png" alt="apple"/> 
<img id="banana" src="banana-small.png" alt="small banana"/> 
<p> 





One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
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its 
</p> 
<p> 
<but 
<but 
<but 
<but 
</p> 
<script> 
var 


var 


var 
for 


} 
proc 


func 


} 


func 


apples. 


ton id="parent">Parent</button> 

ton id="child">First Child</button> 
ton id="prev">Prev Sibling</button> 
ton id="next">Next Sibling</button> 


resultsElem = document.getElementById("results") ; 
element = document. body; 


buttons = document.getElementsByTagName("button") ; 
(var i = 0; i « buttons.length; i++) { 
buttons[i].onclick = handleButtonClick; 


essNewElement (element); 
tion handleButtonClick(e) { 


if (element.style) { 
element.style.backgroundColor - "white"; 
} 





if (e.target.id == "parent" && element != document.body) { 
element = element.parentNode; 

} else if (e.target.id == "child" && element.hasChildNodes()) { 
element = element.firstChild; 

} else if (e.target.id == "prev" && element.previousSibling) { 
element = element.previousSibling; 

} else if (e.target.id == "next" && element.nextSibling) { 
element = element.nextSibling; 

j 


processNewE lement (element) ; 

if (element.style) { 
element.style.backgroundColor = "lightgrey"; 

} 


tion processNewElement(elem) { 
resultsElem.innerHTML = "Element type: " + elem + "\n"; 
resultsElem.innerHTML += "Element id: " + elem.id + "An"; 
resultsElem.innerHTML += "Has child nodes: " 
+ elem.hasChildNodes() + "An"; 
if (elem.previousSibling) { 
resultsElem.innerHTML += ("Prev sibling is: 
+ elem.previousSibling + "\n"); 


} else { 
resultsElem.innerHTML += "No prev sibling\n"; 
} 


if (elem.nextSibling) { 
resultsElem.innerHTML += "Next sibling is: 
+ elem.nextSibling + "\n"; 
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} else { 
resultsElem.innerHTML += "No next sibling\n"; 
} 
</script> 
</body> 
</html> 





这 段 脚本 的 重要 之 处 用 粗 体 进行 显示 ， 它 们 是 实际 进行 导航 操作 的 部 分 。 脚 本 的 其 余部 分 
则 是 在 做 准备 工作 ， 处 理 按钮 点 击 以 及 显示 当前 所 选 元 素 的 信息 。 从 图 26-7 可 以 看 到 这 段 脚 本 


的 效果 。 


26.4 








f —T1— cj] 
J Example x X SY 
€ Q | © titan/listings/example.htm! 





Element type: [object HTMLParagraphElement] 
Element id: tblock 


as child nodes: true 


[object Text] 
[object Text] 


Prev sibling is: 
INext sibling is: 


There are lots of different kinds of fruit - there are over 500 varieties of 
banana alone. By the time we add the countless types of apples, oranges. 
and other well-known fruit, we are faced with thousands of choices. 


0— 


One of the most interesting aspects of fruit is the variety available in each 
country. I live near London, in an area which is known for its apples. 





{Parent | (First Child] [Prev Sibling) [ Next Sibling | 














Who 





t 




















图 26-7 在 DOM 树 里 导航 











小 结 





本 章 向 你 介绍 了 Document 对 象 , 它 是 由 浏览 器 蔡 你 创建 的 ,并 充当 文档 对 象 模型 DOM ) 的 
入 口 。 我 解释 了 你 可 以 如 何 获取 文档 信息 ， 如 何 找到 并 获取 代表 文档 元 素 的 对 象 ， 以 及 如 何 将 
DOM 作 为 一 个 树 形 结构 进行 导航 。 








使 用 Window 对 象 








Window 对 和 象 已 经 作为 HTML5 的 一 部 分 被 添加 到 HTML 规 范 之 中 。 在 此 之 前 , 它 已 经 是 一 种 非 
正式 的 标准 了 。 各 种 浏览 器 都 已 实现 了 一 组 基本 相同 的 功能 ， 并 有 旦 通常 是 一 臻 的。 在 HTML5 规 
范 中 ，Window 对 象 走 括 了 已 是 事实 标准 的 功能 ， 并 加 入 了 一 些 增强 。 对 这 个 对 象 的 实现 情况 并 不 
统一 ， 不 同 的 浏览 器 遵循 程度 不 同 。 这 一 章 把 焦点 放 在 那些 已 经 获得 相当 程度 支持 的 功能 上 。 























注意 ”这 一 章 所 介绍 的 某 些 高 级 功能 依赖 于 DOM 事件 , 而 后 者 是 第 30 章 的 主题 。 如 果 你 不 太 熟 
悉 事 件 ， 也 许 应 该 先 去 阅读 那 一 章 ， 然 后 再 回来 查看 本 章 的 范例 。 





Window 对 象 已 经 成 为 一 个 类 似 倾 印 场 的 地 方 ， 堆 积 了 许多 不 适合 放 在 其 他 地 方 的 功能 。 随 着 
我 们 遍历 这 个 对 象 的 功能 ， 你 就 会 明白 我 的 意思 。 表 27-1 是 本 章 内 容 概要 。 


表 27-1 本章 内 容 概要 

























































































































































































B sm 解决 方案 代码 清单 

获取 一 个 Nindow 对 象 使 用 document .defaultView 或 全 局 变量 window 27-1 

获取 某 个 窗口 的 信息 使 用 Window 的 信息 性 属性 27-2 

与 窗口 进行 交互 使 用 Window 对 象 定义 的 方法 27-3 

用 模式 对 话 框 窗口 提示 用 户 在 某 个 Window 对 象 上 使 Jalert, confirm, prompt #llshowModalDialog 3a 
方法 

对 浏览 器 历史 执行 简单 的 操作 。 ”对 Window.history 属 性 返回 的 History 对 象 使 用 back、forward 和 go 方法 ”27-5 

操控 浏览 器 历史 对 Window.history 属 性 返回 的 History 对象 使 用 pushstate 和 27-6 ~ 27-11 
replaceState 方 法 

向 运行 在 另 一 个 文档 中 的 脚本 ”使 用 跨 文 档 消息 传递 功能 27-12 ~ 27-15 




















发 送 消息 
设置 一 次 性 或 重复 性 计时 器 在 Window 对 象 上 使 用 setInterval 、setTimeout 、clearInterval 和 27-16 
clearTimeout 方 法 























27.1 获取 Window WR 


可 以 用 两 种 方式 获得 Window 对 象 。 正规 的 HTML5 方 式 是 在 Document 对 象 上 使 用 defaultView 
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性 。 男 一 种 则 是 使 用 所 有 浏览 器 都 支持 的 全 局 变量 window。 代 码 清单 27-1 演 示 了 这 两 种 
式 。 
代码 清单 27-1 获取 Window 对 象 


<!DOCTYPE HTML> 





过 M 


<html> 
<head> 
<title>Example</title> 
</head> 
<body id="bod"> 
<table> 
«tr»«th»outerWidth:«/th»«td id="owidth"></td></tr> 
<tr><th>outerHeight:</th><td id="oheight"></td></tr> 
</table> 
<script type="text/javascript"> 
document .getElementById("owidth").innerHTML = window. outerWidth; 
document .getElementById("oheight").innerHTML 
- document.defaultView.outerHeight; 
</script> 
</body> 
</html> 





我 在 脚本 里 使 用 Window 对 象 来 读 取 一 对 属性 的 值 ， 分 别 是 outerWidth 和 outerHeight， 下 一 节 
会 解释 它们 。 








27.2 ”获取 窗口 信息 
顾名思义 ，Window 对 象 的 基本 功能 涉及 当前 文档 所 显示 的 窗口 。 表 27-2 列 出 了 运作 这 些 功能 


























































































































































































































的 属性 和 方法 。 就 HTML 而 言 ， 浏 览 器 窗口 里 的 标签 页 被 视 为 窗口 本 身 。 
表 27-2 ”窗口 相关 的 成 员 
名 称 说 明 返回 
innerHeight ”获取 窗口 内 容 区 域 的 高 度 "HE 
innerWidth 获取 窗口 内 容 区 域 的 宽度 数值 
outerHeight 。 ”获取 窗口 的 高 度 ， 包 括 边框 和 菜单 栏 等 数值 
outerWidth ”获取 窗口 的 宽度 ， 包 括 边框 和 菜单 栏 等 数值 
pageXOffset 获取 窗口 从 左上 角 算 起 水 平 滚动 过 的 像素 数 数值 
pageYOffset 获取 窗口 从 左上 角 算 起 垂直 滚动 过 的 像素 数 数值 
screen 返回 一 个 描述 屏幕 的 Screen 对 象 eee 
screenteft SRIRAM E Aci PA Ae OLR A GR, ORENEAN T RAE, 数值 
或 是 以 同样 的 方法 计算 这 个 值 ) 
serene 尖 取 从 窗口 上 边缘 到 屏幕 上 边缘 的 像素 数 ( 不 是 所 有 浏览 器 都 同时 实现 了 这 两 个 属性 ，。 数值 
或 是 以 同样 的 方法 计算 这 个 值 ) 
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代码 清单 27-2 展 示 了 如 何 使 用 这 些 属性 来 获取 窗口 信息 
代码 清单 27-2 ”获取 窗口 信息 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
table { border-collapse: collapse; border: thin solid black; } 
th, td ( padding: 4px; ] 
</style> 
</head> 
<body> 
<table border="1"> 





«th»outerWidth:«/th»«td id-"ow"»«/td»«th»outerHeight:«/th»«td id="oh"> 








«th»innerWidth:«/th»«td id-"iw"»«/td»«th»innerHeight:«/th»«td id-"ih"» 


th»screen.width:«/th»«td id="sw"></td> 

«th»screen.height:«/th»«td id-"sh"» 
«/tr» 

«/table» 


^ 





«script type-"text/javascript"» 
document.getElementById("ow").innerHTML - window.outerWidth; 
document.getElementById("oh").innerHTML - window.outerHeight; 
document.getElementById("iw").innerHTML - window.innerHeight; 
document.getElementById("ih").innerHTML = window.innerHeight; 
document.getElementById("sw").innerHTML - window.screen.width; 
document.getElementById("sh").innerHTML - window.screen.height; 

«/script» 

«/body» 
«/html» 


上 例 中 的 脚本 在 一 个 表格 里 显示 各 种 window 属 性 的 值 。 请 注意 我 使 用 了 screen 属 性 来 获取 一 


个 Screen 对 象 。 这 个 对 象 提供 了 显示 此 窗口 的 屏幕 信息 ， 并 定义 了 表 27-3 里 展示 的 这 些 属 性 。 
表 27-3 ”Screen 对 象 的 属性 


































































































名 称 说 — BH ik E 
availHeight 屏幕 上 可 供 显示 窗口 部 分 的 高 度 〈 排除 工具 栏 和 菜单 栏 之 类 ) 数值 
availWidth 屏幕 上 可 供 显示 窗口 部 分 的 宽度 〈 排除 工具 栏 和 菜单 栏 之 类 ) 数值 
colorDepth 屏幕 的 颜色 深度 数值 
height 屏幕 的 高 度 数值 
width 屏幕 的 宽度 数值 





从 图 27-1 可 以 看 到 这 段 脚本 的 效果 。 
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图 27-1 显示 窗口 和 屏幕 的 信息 








27.3 与 窗口 进行 交互 
Window 对 象 提供 了 一 组 方法 ,可 以 用 它们 与 包含 文档 的 窗口 进行 交互 , 表 27-4 介 绍 了 这 些 方法 。 


表 27-4 Window 的 交互 功能 
















































































名 称 说 明 i; E 
blur() 让 窗口 失去 键盘 焦点 void 
close() 关闭 窗口 〈 不 是 所 有 浏览 器 都 允许 某 个 脚本 关闭 窗口 ) void 
focus () 让 窗口 获得 键盘 焦点 void 
print() 提示 用 户 打印 页 面 void 
scrollBy(oo, <y>) 让 文档 相对 于 当前 位 置 进行 滚动 void 
scrollTo(oo, <y>) 滚动 到 指定 的 位 置 void 
stop() 停止 载 人 文档 void 











所 有 这 些 方法 都 应 该 谨慎 使 用 , 因为 它们 会 让 用 户 失去 对 浏览 器 窗口 的 控制 。 用 户 对 应 用 程 
序 应 该 具有 什么 行为 有 着 相当 固定 的 预期 ， 而 那些 会 滚动 打印 和 关闭 自己 的 窗口 一 般 来 说 是 不 
受 欢迎 的 。 如 果 你 不 得 不 使 用 这 些 方法 ,请 把 控制 权 交 给 用 户 ， 并 提供 非常 清晰 的 视觉 线索 来 告 
诉 他 们 即将 发 生 什么 。 

代码 清单 27-3 展 示 了 一 些 窗口 交互 方法 的 使 用 。 


代码 清单 27-3 与 窗口 进行 交互 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p> 
<button id="scroll">Scroll</button> 
<button id="print">Print</button> 
<button id="close">Close</button> 
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</p> 

<p> 
There are lots of different kinds of fruit - there are over 500 varieties 

f banana alone. By the time we add the countless types of apples, oranges, 

and other well-known fruit, we are faced with thousands of choices. 

<img src="apple.png" alt="apple"/> 

One of the most interesting aspects of fruit is the variety available in 

each country. I live near London, in an area which is known for 

its apples. 

<img src-"banana-small.png" alt="banana"/> 

When traveling in Asia, I was struck by how many different 

kinds of banana were available - many of which had unique flavors and 

which were only available within a small region. 


o 





And, of course, there are fruits which are truly unique - I am put in mind 
of the durian, which is widely consumed in SE Asia and is known as the 
"king of fruits." The durian is largely unknown in Europe and the USA - if 
it is known at all, it is for the overwhelming smell, which is compared 

to a combination of almonds, rotten onions and gym socks. 











</p> 
<script> 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 








} 
function handleButtonPress(e) { 
if (e.target.id == "print") { 
window. print(); 
} else if (e.target.id == "close") { 
window.close(); 
} else { 
window.scrollTo(0, 400); 
} 
} 
</script> 
</body> 
</html> 


这 个 例子 里 的 脚本 会 打印 、 关 闭 和 滚动 窗口 ， 作 为 对 用 户 按 下 按钮 的 反馈 。 
27.4 ”对 用 户 进 行 提示 
Window 对 和 象 包含 一 组 方法 ， 能 以 不 同 的 方式 对 用 户 进行 提示 ， 如 表 27-$ 所 示 。 


表 27-5 ”提示 功能 




























































































名 称 说 —H i& E 
alert (<msg>) 向 用 户 显 示 一 个 对 话 框 窗口 并 等 候 其 被 关闭 void 
confirm(<msg>) 显示 一 个 带 有 确认 和 取消 提示 的 对 话 框 窗 布尔 值 
prompt (<msg>, <val>) 显示 对 话 框 提示 用 户 输入 一 个 值 字符 串 
showModalDialog(«url») 弹出 一 个 窗口 ， 显 示 指 定 的 URL void 
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这 些 方法 里 的 每 一 种 都 会 呈现 出 不 同 的 提示 类 型 。 代 码 清单 27-4 演 示 了 如 何 使 用 它们 。 
代码 清单 27-4 ”对 用 户 进 行 提示 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
table { border-collapse: collapse; border: thin solid black; } 
th, td { padding: 4px; } 
</style> 
</head> 
<body> 


<button id="alert">Alert</button> 
«button id-"confirm"»Confirm«/button» 
«button id-"prompt"»Prompt«/button» 
«button id-"modal"»Modal Dialog«/button» 


«script type-"text/javascript"» 


var buttons = document.getElementsByTagName("button") ; 

for (var i = 0 ; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 

} 











function handleButtonPress(e) { 

if (e.target.id == "alert") { 
window.alert("This is an alert"); 
} else if (e.target.id == "confirm") { 
var confirmed 
= window.confirm("This is a confirm - do you want to proceed?"); 
alert("Confirmed? " + confirmed); 
} else if (e.target.id == "prompt") { 
var response = window.prompt("Enter a word", "hello"); 
alert("The word was " + response); 
} else if (e.target.id == "modal") { 

window. showModalDialog("http://apress.com"); 














} 
</script> 
</body> 
</html> 


这 些 功 能 应 该 谨慎 使 用 。 浏 览 器 处 理 提 示 的 方式 各 有 不 同 ， 会 给 用 户 带 来 不 同 的 体验 。 

请 考虑 图 27-2 中 的 例子 ， 它 展示 了 Chrome 和 Firefox 浏 览 器 对 alert 提 示 所 使 用 的 不 同 的 显示 方 
式 。 这 两 种 提示 也 许 看 上 去 很 相似 , 但 效果 却 有 着 很 大 的 区 别 。Chrome 按 照 字面 意思 遵循 了 规范 ， 
它 创建 出 一 个 模式 对 话 框 。 这 就 意味 着 浏览 器 除了 等 待 用 户 点 击 OK 按 钮 关闭 窗口 外 不 会 做 任何 其 
他 的 事情 。 用 户 不 能 切换 标签 页 ， 关 闭 当 前 标签 ， 或 者 在 浏览 器 上 做 任何 别 的 事情 。 Firefox 浏 览 
器 则 采取 了 更 宽松 的 方式 ， 将 提示 的 作用 范围 限制 在 当前 标签 页 中 。 这 是 一 种 更 为 合理 的 做 法 ， 
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但 却 是 一 种 不 同 的 做 法 ， 而 不 一 致 性 是 为 Web 应 用 程序 选择 功能 时 需要 仔细 考虑 的 一 点 。 








Example 
© The page at titan says: 








This is an alert 


This is an alert 


























图 27-2 Chrome 和 Firefox 浏 览 器 展示 alert 提 示 




















showModalDialog 方 法 创建 了 一 个 弹出 窗口 (这 个 功能 已 经 被 广告 商 们 严重 滥用 了 )。 事实 上 ， 
它 的 滥用 程度 是 如 此 严重 , 以 至 于 所 有 的 浏览 器 都 对 这 个 功能 加 以 限制 , 仅 允 许 用 户 事先 许可 的 
网 站 使 用 。 如 果 你 依赖 弹出 窗口 向 用 户 提 供 关 键 信息 ， 则 会 面临 他 们 根本 看 不 到 的 风险 。 





提示 如果 想 要 吸引 用 户 的 注意 , 可 以 考虑 使 用 jQuery 这 样 的 JavaScript 库 所 提供 的 内 联 对 话 框 。 
它们 易于 使 用 ， 打 扰 程 度 低 ， 而 且 在 各 种 浏览 器 上 都 有 着 一 致 的 行为 和 外 观 。 要 了 解 
jQuery 的 更 多 信息 ， 请 参阅 我 撰写 的 Pro jQuery 一 书 ( 由 Apress 出 版 )。 


27.5 ”获取 基本 信息 


Window 对 象 让 你 能 访问 某 些 返 回 基本 信息 的 对 象 ， 这 些 信息 包括 当前 地 址 ( 即 文档 载 人 的 来 
源 URL ) 的 详情 和 用 户 的 浏览 历史 。 表 27-6 介 绍 了 这 些 属性 。 


表 27-6 ”提供 信息 的 对 象 属性 




















名 称 说 明 E g 
document 返回 与 此 窗口 关联 的 Document 对 象 Document 
history 提供 对 浏览 器 历史 的 访问 History 

location 提供 当前 文档 地 址 的 详细 信息 Location 

















Document 对 象 是 第 26 章 的 主题 。Window.location 属 性 返回 的 Location 对 象 和 Document. 
location 属 性 返回 的 相同 ， 也 在 第 26 章 进行 介绍 。 下 面 我 们 来 了 解 一 下 如 何 使 用 浏览 器 历史 。 


27.6 ”使 用 浏览 器 历史 


Window.history 属 性 返回 一 个 History 对 象 ， 你 可 以 用 它 对 浏览 器 历史 进行 一 些 基 本 的 操作 。 
表 27-7 介 绍 了 History 对 象 定义 的 一 些 属 性 和 方法 。 
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#27-7 History 对 象 的 属性 和 方法 





















































名 称 说 Hj 返 回 
back() 在 浏览 历史 中 后 退 一 步 void 
forward() 在 浏览 历史 中 前 进一步 void 
go(<index>) 转 到 相对 于 当前 文档 的 某 个 浏览 历史 位 置 。 正 值 是 前 进 , 负 值 void 

是 后 退 
length 返回 浏览 历史 中 的 项 目 数量 数值 
pushState(<state>, <title>, <url>) 向 浏览 器 历史 添加 一 个 条 目 void 
replaceState(<state>, «title», «urb) ”替换 浏览 器 历史 中 的 当前 条 目 void 
state 返回 浏览 器 历史 中 关联 当前 文档 的 状态 数据 对 象 


27.6.1 在 浏览 历史 中 导航 


back 、forward 和 go 这 三 个 方法 告诉 浏览 器 该 导航 到 浏览 历史 中 的 哪个 URL E back/forward 
方法 的 效果 与 浏览 右 的 后 退 /前 进 按钮 是 一 致 的 。go 方 法 会 导航 至 相对 于 当前 文档 的 某 个 浏览 历 
史 位 置 。 正 值 指示 浏览 器 应 该 在 浏览 历史 中 前 进 , 负 值 则 是 后 退 。 值 的 大 小 则 指定 了 具体 的 步 数 。 
举 个 例子 ，-2 这 个 值 告诉 浏览 器 要 导航 至 最 近 浏 览 历史 之 前 的 那个 文档 。 代 码 清单 27-5 演 示 了 如 
何 使 用 这 三 个 方法 。 


























代码 清单 27-5 在 浏览 器 历史 中 导航 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<button id="back">Back</button> 
«button id="forward">Forward</button> 
<button id="go">Go</button> 





<script type="text/javascript"> 


var buttons = document.getElementsByTagName("button") ; 
for (var i = 0 ; i « buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 








} 


function handleButtonPress(e) { 
if (e.target.id == "back") { 
window. history.back(); 
} else if (e.target.id == "forward") { 
window. history. forward(); 
} else if (e.target.id == "go") { 
window. history. go("http://www.apress.com") ; 
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} 
} 


</script> 
</body> 
</html> 


除了 这 些 基 本 的 函数 ，HTML5 还 支持 在 某 些 约束 条 件 下 对 浏览 器 历史 进行 修改 。 最 好 的 说 
明 方 式 英 过 于 展示 一 个 能 通过 修改 浏览 历史 加 以 解决 的 问题 范例 ， 如 代码 清单 27-6 所 示 。 


代码 清单 27-6 ”处 理 浏览 器 历史 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p id="msg"></p> 
«button id="banana">Banana</button> 
«button id-"apple"»Apple«/button» 








«script type-"text/javascript"» 


var sel - "No selection made"; 
document.getElementById("msg").innerHTML = sel; 


var buttons = document.getElementsByTagName("button") ; 

for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 

document. getElementById("msg").innerHTML = e.target.innerHTML; 

h 

} 

</script> 
</body> 
</html> 


这 个 例子 包含 了 一 段 脚本 ， 它 根据 用 户 点 击 的 按钮 显示 出 一 段 对 应 的 消息 ， 问题 
在 于 ， 当 用 户 离开 示例 文档 后 ， 关 于 被 点 击 按钮 的 信息 就 于 失 了 。 从 图 27-3 可 以 看 到 这 一 点 。 




















© Example 
€ > Q Otitan/listings/example.htm 

















图 27-3 ”常规 的 浏览 历史 顺序 
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各 个 事件 的 发 生 顺 序 如 下 所 示 : 

(1) 导航 至 示例 文档 ， 显 示 的 是 No selection made 这 条 消息 ; 

(2) 点 击 Banana 按 钮 ， 现 在 显示 的 是 Banana 这 条 消息 ; 

(3) 导航 至 http://apress.com; 

(4) 点 击 后 退 按 钮 返回 到 示例 文档 。 

在 这 一 串 事 件 的 最 后 , 我 回 到 了 示例 文档 , 但 里 面 没有 之 前 选择 的 记录 。 这 是 浏览 器 的 常规 
行为 ， 它 处 理 浏览 历史 用 的 是 URL。 当 我 点 击 后 退 按钮 时 ， 浏 览 顺 就 返回 到 示例 文档 的 URL 上 ， 
我 则 需要 重新 开始 。 这 段 会 话 历史 看 上 去 就 像 这 样 : 

O http://titan/listings/example.html 
O http://apress.com 


27.6.2 ”在 浏览 历史 里 插入 条 目 


History.pushstate 方 法 允许 我 们 给 浏览 器 历史 添加 一 个 URL, 但 带 有 一 些 约束 条 件 。URL 的 
服务 器 名 称 和 端口 号 必须 与 当前 文档 的 相同 。 添加 URL 的 方法 之 一 是 只 使 用 附 在 当前 文档 后 面 的 
查询 字符 串 或 锚 片 段 ， 如 代码 清单 27-7 所 示 。 


代码 清单 27-7 ”向 浏览 器 历史 添加 一 个 条 目 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p id="msg"></p> 
«button id="banana">Banana</button> 
«button id-"apple"»Apple«/button» 



























































«script type-"text/javascript"» 


var sel - "No selection made"; 


if (window.location.search -- "?banana") ( 
sel - "Selection: Banana"; 
) else if (window.location.search -- "?apple") ( 


sel - "Selection: Apple"; 


} 
document. getElementById("msg").innerHTML = sel; 


var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
document. getElementById("msg").innerHTML = e.target.innerHTML; 
window.history.pushState("", "", "2" + e.target.id); 
B 
} 


</script> 
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</body> 
</html> 


此 示例 中 的 脚本 使 用 pushstate 方 法 来 向 浏览 器 历史 添加 一 个 条 目 。 它 添加 的 URL 是 当前 文 
档 的 URL 加 上 一 个 标识 用 户 点 击 了 哪个 按钮 的 查询 字符 串 。 我 还 添加 了 一 些 代 码 , 用 Location 对 
象 ( 在 第 26 章 介绍 ) 来 读 取 查询 字符 串 和 所 选择 的 值 。 这 段 脚 本 带 来 了 两 种 用 户 可 以 识别 的 变化 。 
第 一 种 在 用 户 点 击 某 个 按钮 时 出 现 ， 如 图 27-4 所 示 。 
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/ C) Example 


| imd am © bample 
€ Q |Q titan/listings/examr 
E] Banana 

| Banana 
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图 27-4 将 某 个 条 目 推 人 浏 览 需 历史 的 效果 

















当 用 户 点 击 Banana 按 钮 时 , 我 推 人 浏览 需 历 史 的 URL 会 显示 在 浏览 需 的 导航 栏 中 。 文档 并 没 
有 被 重新 加 载 ， 只 有 浏览 历史 和 显示 的 URL 发 生 了 变化 。 此 时 ， 浏 览 器 历史 看 上 去 就 像 这 样 : 
O http://titan/listings/example.html 


QO) http://titan/listings/example.html?banana 
用 户 点 击 某 个 按钮 后 ， 一 个 新 的 URL 就 会 被 添加 到 浏览 历史 当中 ， 以 此 创建 一 个 条 目 来 


记录 用 户 的 导航 路 径 。 这 些 额 外 条 目的 好 处 体现 在 用 户 导 航 至 别处 然后 返回 文档 时 , 如 图 27-5 
Biz o 
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© Exemple EY 
€ > C QOtitan/listings/examplehtml?banana We) XA 
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图 27-5 在 浏览 器 历史 中 保存 应 用 程序 的 面包 


CD HEF (breadcrumb ) 是 指 在 用 户 界面 上 通过 标注 当前 所 在 位 置 以 及 之 前 的 各 个 节点 来 帮助 用 户 导航 。3 
来 源 于 格林 童话 故事 《 汉 赛 尔 与 格 莱特 》 中 主人 公 沿 路 撒 面 包 居 以 标记 路 径 。 一 一 译 者 注 
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27.6.3 “为 不 同 的 文档 添加 条 目 


当 你 向 浏览 器 历史 添加 条 目 时 , 不 需要 局 限于 将 查询 字符 串 或 者 文档 片段 作为 URL。 你 可 以 
虽 定 任何 URL ， 只 要 它 的 来 源 和 当前 文档 相同 即 可 。 不 过 ， 有 一 个 特别 之 处 需要 注意 。 代 码 清 
单 27-8 对 此 进行 了 演示 。 


代码 清单 27-8 在 浏览 历史 条 目 中 使 用 不 同 的 URL 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p id="msg"></p> 
«button id-"banana"»Banana«/button» 
«button id-"apple"»Apple«/button» 





«script type-"text/javascript"» 


var sel - "No selection made"; 

if (window.location.search == "?banana") { 
sel = "Selection: Banana"; 

j else if (window.location.search -- "?apple") ( 
sel - "Selection: Apple"; 


} 
document. getElementById("msg").innerHTML = sel; 


var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
document. getElementById("msg").innerHTML = e.target.innerHTML; 


window. history.pushState("", "", "otherpage.html?" + e.target.id); 





Js 
} 
</script> 
</body> 
</html> 


这 段 脚本 只 有 一 处 变化 : 我 把 pushstate 方 法 的 URL 参 数 设 为 otherpage.html。 代 码 清单 27-9 
列 出 了 otherpage.html 的 内 容 。 


代码 清单 27-9 ”otherpage.html 的 内 容 


<!DOCTYPE HTML» 
«html» 
«head» 
«title»Other Page</title> 
«/head» 
«body» 
«hi»Other Page«/hi» 
«p id-"msg"»«/p» 
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<script> 
var sel = "No selection made"; 
if (window. location.search == "?banana") { 
sel = "Selection: Banana"; 
} else if (window. location.search == "?apple") { 
sel = "Selection: Apple"; 
} 
document.getElementById("msg").innerHTML = sel; 
</script> 
</body> 
</html> 


























我 仍旧 使 用 查询 字符 串 来 保存 用 户 的 选择 , 但 是 文档 本 身 发 生 了 改变 。 特别 之 处 此 时 就 会 表 
现 出 来 。 图 27-6 展 示 了 运行 这 个 示例 时 你 将 会 得 到 的 结 
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Al27-6 ”在 浏览 历史 条 目 中 使 用 不 同 的 URL 


如 图 所 示 ， 导 航 框 里 显示 的 是 另 一 个 文档 的 URL ,但 文档 自身 并 没有 发 生变 化 。 陷 阱 就 在 这 
E: 如 果 用 户 导 航 至 别 的 文档 ， 然 后 点 击 后 退 按钮 ,浏览 器 就 可 以 选择 是 显示 原本 的 文档 ( 在 这 
个 例子 中 是 example.html )， 还 是 显示 所 指定 的 文档 (otherpage.html )。 你 没有 办 法 控制 它 显示 
哪 一 种 ， 更 糟糕 的 是 ， 不 同 的 浏览 器 会 以 不 同 的 方式 进行 处 理 。 


27.6.4 在 浏览 历史 中 保存 复杂 状态 


请 注意 当 我 在 之 前 几 个 例子 里 使 用 pushstate 方 法 时 , 我 给 头 两 个 参数 用 的 是 空 字符 串 ( "" )。 
中 间 这 个 参数 会 被 所 有 的 主流 浏览 器 忽略 , 在 这 里 不 提 也 罢 。 但 是 第 一 个 参数 可 能 会 很 有 用 ， 因 
为 它 让 你 能 在 浏览 器 历史 里 将 URL 与 一 个 复杂 状态 对 象 进行 关联 。 

在 之 前 的 例子 里 , 我 用 查询 字符 串 来 代表 用 户 的 选择 。 把 它 用 于 这 样 一 段 简单 的 数据 是 可 行 
的 ， 但 如 果 你 要 保存 更 为 复杂 的 数据 ， 它 就 帮 不 上 忙 了 。 代 码 清 单 27-10 演 示 了 如 何 用 pushstate 
的 第 一 个 参数 来 保存 更 为 复杂 的 数据 。 


代码 清单 27-10 ”在 浏览 器 历史 中 保存 状态 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
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* ( margin: 2px; padding: 4px; border-collapse: collapse; } 
</style> 
</head> 
<body> 
<table border="1"> 
<tr><th>Name:</th><td id="name"></td></tr> 
<tr><th>Color:</th><td id="color"></td></tr> 
<tr><th>Size:</th><td id="size"></td></tr> 
<tr><th>State:</th><td id="state"></td></tr> 
<tr><th>Event:</th><td id="event"></td></tr> 
</table> 
«button id="banana">Banana</button> 
«button id-"apple"»Apple«/button» 


«script type-"text/javascript"» 


if (window.history.state) ( 
displayState(window.history.state); 
document.getElementById("state").innerHTML = "Yes"; 

} else { 
document.getElementById("name").innerHTML = "No Selection"; 

} 


window.onpopstate = function(e) { 
displayState(e.state) ; 
document .getElementById("event").innerHTML = "Yes"; 


} 


var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
var stateObj; 
if (e.target.id == "banana") { 
stateObj = { 
name: "banana", 
color: "yellow", 
size: "large" 


} 
} else { 
stateObj = { 
name: "apple", 
color: "red", 
size: "medium" 
j 


} 
window. history.pushState(stateObj, ""); 
displayState(stateObj); 
Is 
} 


function displayState(stateObj) { 
document.getElementById("name").innerHTML = stateObj.name; 
document.getElementById("color").innerHTML = stateObj.color; 
document.getElementById("size").innerHTML = stateObj.size; 
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</script> 
</body> 
</html> 


在 这 个 例子 中 , 我 用 一 个 对 象 来 代表 用 户 的 选择 。 它 带 有 三 个 属性 ,分 别 是 用 户 所 选 水 果 的 
名 称 、 颜 色 和 尺寸 ， 就 像 这 样 : 

stateObj = { name: "apple", color: "red", size: "medium"} 

当 用 户 做 出 选择 后 , 我 用 History.pushstate 方 法 创建 一 个 新 的 浏览 历史 条 目 , 并 把 它 与 状态 
对 象 进行 关联 ， 就 像 这 样 : 

window.history.pushState(stateObj, ""); 

我 在 这 个 例子 中 没有 指定 一 个 URL， 这 就 意味 着 状态 对 象 是 关联 到 当前 文档 上 。( 我 这 么 做 
是 为 了 演示 可 能 性 。 我 本 可 以 像 之 前 的 例子 那样 指定 一 个 URL。 ) 

当 用 户 返回 到 你 的 文档 ， 可 以 使 用 两 种 方式 来 取 回 状态 对 象 。 第 一 种 方式 是 通过 
history.state 属 性 ， 就 像 这 样 : 


if (window.history.state) { 
displayState(window. history. state) ; 




















此 时 你 面临 一 个 问题 : 不 是 所 有 的 浏览 器 都 支持 通过 这 个 属性 获取 状态 对 象 (HE Chrome 
就 不 支持 )。 要 解决 这 个 问题 ， 必 须 同 时 监听 popstate 事 件 。 我 会 在 第 30 章 解释 事件 ， 但 这 个 例 
子 对 使 用 浏览 历史 功能 而 言 十 分 重要 ,所 以 你 可 能 应 该 在 阅读 那 一 章 后 返回 这 一 节 。 下面 这 段 代 
码 会 监听 和 响应 popstate 事 件 : 


window.onpopstate = function(e) { 
displayState(e.state) ; 
document.getElementById("event").innerHTML = "Yes"; 








} 
请 注意 我 在 一 个 table 元 素 里 显示 状态 信息 ， 并 加 上 了 状态 对 象 的 获取 细节 : 是 通过 属性 还 是 
通过 事件 。 你 可 以 在 图 27-7 中 看 到 它 的 显示 情况 , 不 过 理解 这 个 例子 最 好 的 方式 还 是 亲手 实验 一 下 。 
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图 27-7 ”使 用 浏览 器 历史 中 的 状态 对 象 
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警告 ”必须 注意 避免 依赖 状态 信息 的 存在 。 浏 览 器 的 历史 在 很 多 情形 下 会 委 失 ， 包 括 用 户 有 意 
删除 它 。 


27.6.5 ”替换 浏览 历史 中 的 条 目 


之 前 的 那些 例子 都 把 焦点 放 在 给 当前 文档 的 浏览 历史 添加 条 目 上 ， 但 你 还 可 以 用 
replaceState 方 法 来 为 当前 文档 替换 条 目 。 代 码 清单 27-11 对 此 进行 了 演示 。 


代码 清单 27-11 ”替换 浏览 器 历史 中 的 当前 条 目 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p id="msg"></p> 
«button id-"banana"»Banana«/button» 
«button id-"apple"»Apple«/button» 





«script type-"text/javascript"» 


var sel - "No selection made"; 

if (window.location.search == "?banana") { 
sel = "Selection: Banana"; 

} else if (window. location.search == "?apple") { 
sel = "Selection: Apple"; 

} 


document.getElementById("msg").innerHTML = sel; 


var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = function(e) { 
document. getElementById("msg").innerHTML = e.target.innerHTML; 
window. history.replaceState("", "", "otherpage?" + e.target.id); 








B 
} 
</script> 
</body> 
</html> 


27.7 ”使 用 跨 文 档 消息 传递 


Window 对 象 还 为 男 一 种 名 为 “ 跨 文档 消息 传递 ”( cross-document messaging ) 的 HTML5 新 功 
能 提供 了 入 口 。 通 常 T T 不 同 来 源 (被 称 为 “origins”) 的 脚本 是 不 允许 进行 通信 的 ， 但 是 
对 脚本 间 通 信 这 一 功能 的 需求 是 如 此 强烈 , 以 至 于 出 现 了 无 数 的 补丁 和 变通 方法 来 绕 过 浏览 器 的 
安全 防护 措施 。 
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注意 这 是 一 个 会 用 到 事件 的 高 级 主题 , 我 将 在 第 30 章 介绍 事件 。 你 可 能 应 该 先 去 看 看 那 一 章 ， 
然后 再 回来 阅读 本 节 内 容 。 


理解 脚本 的 来 源 


浏览 器 通过 UREL 的 各 个 组 成 部 分 来 判断 某 个 资源 ( 比如 一 个 脚本 ) 的 来 源 。 不 同 来 源 的 脚 
本 间 会 被 加 上 交互 和 通信 限制 。 如果 两 个 脚本 的 协议 、 主 机 名 和 端口 号 相同 ,那么 它们 就 被 认 
为 是 拥有 同一 个 来 源 ， 即 使 URL 的 其 他 部 分 不 一 样 也 是 如 此 。 下面 的 表格 给 出 了 一 些 例子 , 其 
中 的 每 一 项 都 是 与 http://titan.mydomain.com/example.html 这 个 URL 进 行 比较 。 

















URL 结 果 
http://titan.mydomain.com/apps/other.html 来 源 相 同 
https://titan.mydomain.com/apps/other.html 来 源 不 同 ， 协 议 不 一 致 
http://titan:81.mydomain.com/apps/example.html 来 源 不 同 ， 端 口号 不 一 臻 











http: //myserver .mydomain.com/doc.html 来 源 不 同 ， 主 机 不 一 致 


脚本 可 以 使 用 document.domain 属 性 来 改变 它们 的 来 源 ， 但 是 只 能 扩展 当前 UREL 的 涵盖 范 
围 。 举 个 例子 ， 来 源 于 http://server1.domain.com 和 http://server2.domain.com 的 两 个 脚本 可 
以 把 它们 的 domain 属 性 都 设置 为 domain.com 以 获得 相同 的 来 源 。 
一 
HTML5 通 过 Window 里 的 方法 为 这 类 通信 提供 了 一 种 规范 ， 如 表 27-8 所 示 。 


表 27-8 ” 跨 文档 消息 传递 方法 














名 称 说 OB iR [s] 
postMessage(«msg», «origin») 给 另 一 个 文档 发 送 指定 的 消息 void 


作为 给 这 个 功能 设置 的 一 个 场景 ， 代 码 清 单 27-12 展 示 了 我 想 要 解决 的 问题 。 
代码 清单 27-12” 跨 文档 问题 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p id="status">Ready</p> 
<button id="send">Send Message</button> 
<p> 
<iframe name="nested" src="http://titan:81/otherdomain. html" width="90%" 
height="75px"></iframe> 








</p> 
<script> 
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document.getElementById("send").onclick = function() { 


document.getElementById("status").innerHTML = "Message Sent"; 
} 


</script> 
</body> 
</html> 


这 个 文档 包含 一 个 iframe 元 素 ， 用 于 载 入 一 个 不 同 来 源 的 文档 。 脚 本 只 有 来 自 相 同 的 主机 和 
端口 才 算 属于 同一 个 来 源 。 我 会 从 名 为 titan 的 服务 器 上 的 80 端 口 载 入 这 个 文档 ， 因 此 81 端 口 的 另 
一 个 服务 器 就 被 认为 是 不 同 的 来 源 。 代 码 清 单 27-13 展 示 了 文档 otherdomain.html 的 内 容 ， 它 会 由 
iframe 载 人 。 








代码 清单 27-13 “文档 otherdomain.html 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Other Page</title> 
</head> 
<body> 
<h1 id="banner">This is the nested document</h1> 
<script> 
function displayMessage(msg) { 
document .getElementById("banner").innerHTML = msg; 
} 


</script> 
</body> 
</html> 


E XC example.html HY H pp Z& HE 9 38] FA te A XC 4 otherdomain.html Hi script JÈ K Pre SLAY 
displayMessagePK Zi, 

我 将 使 用 postMessage 方 法 ,但 是 我 需要 在 包含 目标 文档 的 Window 上 调用 这 个 方法 。 幸 运 的 是 ， 
Window 对 象 提供 了 寻找 馈 入 文档 所 需 的 支持 ， 如 表 27-9 所 示 。 


表 27-9 SKA RA Window 








































































































名 称 说 OBB 返 回 
defaultView 返回 活动 文档 的 Window indow 
frames 返回 文档 内 和 藤 iframe 元 素 的 Window 对 象 数 组 indow[] 
opener 返回 打开 当前 浏览 上 下 文 环境 的 Window indow 
parent 返回 当前 Window 的 父 Window indow 
self 返回 当前 文档 的 Nindow indow 
top 返回 最 上 层 的 Window indow 

ength IRC AHA iframe 38 BE 数值 

<index>] IR FB x SS AN HR SCY Window indow 
<name> ] TR NF AE AA RAR CE A Window indow 
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在 这 个 例子 里 ,我 将 使 用 数组 风格 的 表示 法 来 定位 我 要 的 Window 对 象 ， 这 样 就 能 调用 
postMessage 方 法 了 。 代 码 清单 27-14 展 示 了 文档 example.html 所 需要 添加 的 代码 。 


代码 清单 27-14 ”定位 Window 对 象 并 调用 postMessage 方 法 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p id="status">Ready</p> 
<button id="send">Send Message</button> 
<p> 
<iframe name="nested" src="http://titan:81/otherdomain.html" width="90%" 
height="75px"></iframe> 





</p> 
<script> 
document.gettlementById("send").onclick = function() { 


window["nested"].postMessage("I like apples", "http://titan:81"); 
document.getElementById("status").innerHTML = "Message Sent"; 
} 
</script> 
</body> 
</html> 





先 找到 目标 Window 对 象 (window["nested"] )， 它 包含 我 想 要 发 送 消 息 的 脚本 ， 接 着 再 调用 
postMessage 方 法 。 其 中 的 两 个 参数 是 我 想 要 发 送 的 消息 和 目标 脚本 的 来 源 。 来 源 在 这 个 例子 中 
是 http://titan:81， 但 如 果 你 正在 重 现 这 个 例子 ， 则 会 根据 你 的 运行 环境 有 所 不 同 。 


警告 作为 一 项 安全 措施 ， 如 果 调 用 postMessage 方 法 时 目标 来 源 错误 ， 浏 览 器 就 会 丢弃 这 条 





为 了 接收 这 条 消息 ， 我 需要 在 另 一 个 脚本 里 监听 message 事 件 。( 之 前 提示 过 ， 我 会 在 第 30 章 
解释 事件 。 如 果 你 不 熟悉 事件 和 它们 的 操作 方法 ， 现 在 也 许 应 该 去 阅读 那 一 章 。) Du Va PT 
一 个 MessageEvent 对 象 ， 它 定义 的 属性 如 表 27-10 所 示 。 











表 27-10 ”MessageEvent 的 属性 











名 称 说 — HH ik E 
data 返回 别 的 脚本 发 送 的 消息 对 象 
origin 返回 发 送 消息 脚本 的 来 源 字符 串 
source 返回 发 送 消息 脚本 所 关联 的 窗 Window 














代码 清单 27-15 展 示 了 如 何 使 用 message 事 件 来 接收 跨 文档 的 消息 。 
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代码 清单 27-15 ”监听 message 事 件 


<!DOCTYPE HTML> 
<html> 


<head> 
<title>Other Page</title> 


</head> 


<body> 
<h1 id="banner">This is the nested document</h1> 


<script> 
window. addEventListener("message", receiveMessage, false); 


function receiveMessage(e) { 
if (e.origin == "http://titan") { 
displayMessage(e.data); 


} else { 
displayMessage("Message Discarded"); 


} 


function displayMessage(msg) { 
document.getElementById("banner").innerHTML = msg; 


} 
</script> 
</body> 
</html> 
从 第 30 章 可 以 了 解 addEventListener 方 法 。 请 注意 当 收 到 message 事 件 时 ， 我 会 检查 
MessageEvent 对 象 的 origin 属 性 ， 以 确保 我 能 识别 并 信任 另 一 个 脚本 。 这 是 个 重要 的 预防 措施 ， 
防止 对 来 自 未 知 和 不 受信 任 脚 本 的 消息 进行 操作 。 现 在 我 就 有 了 一 套 简单 的 机 制 ， 可 以 从 一 个 脚 
本 向 另 一 个 发 送 消息 ， 即 使 它们 的 来 源 不 同 也 没 问 题 。 从 图 27-8 可 以 看 到 这 种 效果 。 
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图 27-8 ”使 用 跨 文档 消息 传递 功能 
































27.8 ”使 用 计时 器 
Window 对 象 提供 的 一 个 有 用 功能 是 可 以 设置 一 次 性 和 循环 的 计时 器 。 这 些 计时 器 被 用 于 在 巴 
设 的 时 间 段 后 执行 某 个 函数 。 表 27-11 概 述 了 支持 这 项 功能 的 方法 。 
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表 27-11 计时 方法 






































名 P 说 明 ig E 
clearInterval(«id») dE REP BST PR TR Br FERT a void 
clearTimeout(«id») 撤销 某 个 超时 计时 器 void 
setInterval(<function>, <time>) 创建 一 个 计时 器 ， 每 隔 time 毫 秒 调 用 指定 的 函数 整数 
setTimeout(<function>, <time>) 创建 一 个 计时 器 ， 等 竺 time 毫秒 后 调用 指定 的 函数 整数 





setTimeout 方 法 创建 的 计时 需 只 执行 一 次 指定 的 函数 , 而 setInterval 方 法 创建 的 计时 器 会 重 
复 执行 某 个 图 数 。 这 些 方法 返回 一 个 唯一 的 标识 符 ， 你 可 以 稍 后 把 它们 作为 clearTimeout 和 
clearInterval 方 法 的 参数 来 撤销 计时 器 。 代 码 清单 27-16 展 示 了 如 何 使 用 这 些 计时 器 方法 。 


代码 清单 27-16 ”使 用 计时 器 方法 
<!DOCTYPE HTML> 























<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p id="msg"></p> 
<p> 
«button id="settime">Set Time</button> 
«button id="cleartime">Clear Time</button> 
<button id="setinterval">Set Interval</button> 
<button id="clearinterval">Clear Interval</button> 
</p> 
<script> 


var buttons = document.getElementsByTagName("button") ; 

for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 

} 


var timeID; 
var intervalID; 
var count - 0; 


function handleButtonPress(e) { 

if (e.target.id == "settime") { 

timeID = window.setTimeout(function() { 
displayMsg("Timeout Expired"); 

), 5000); 

displayMsg("Timeout Set"); 

} else if (e.target.id == "cleartime") { 
window.clearTimeout(timeID); 
displayMsg("Timeout Cleared"); 

} else if (e.target.id == "setinterval") { 
intervalID = window.setInterval(function() { 

displayMsg("Interval expired. Counter: 


+ count); 
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}, 2000); 
displayMsg("Interval Set"); 

} else if (e.target.id == "clearinterval") { 
window. clearInterval(intervalID) ; 
displayMsg("Interval Cleared"); 


} 


function displayMsg(msg) { 
document.getElementById("msg").innerHTML = msg; 
} 


</script> 
</body> 
</html> 


xx 4 BUT rp SAAS oS CENT PE S ERE TRI TRIB HE, 这 些 计时 器 调用 displayMsg 
函数 来 设置 某 个 p 元 素 的 内 容 。 从 图 27-9 可 以 看 到 实现 的 效果 。 
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图 27-9 ”使 用 超时 计时 器 和 时 间 间 隔 计 时 器 


超时 计时 器 和 时 间 间 隔 计时 器 也 许 很 有 用 , 但 你 应 该 仔细 考虑 如 何 使 用 它们 。 用 户 通 党 期 望 
一 个 应 用 程序 的 状态 保持 不 变 , 除非 他 们 正在 直接 与 其 交互 。 如 果 你 只 是 用 计时 器 自动 改变 应 用 
程序 的 状态 ， 那 么 应 该 思考 这 样 做 的 结果 是 对 用 户 有 帮助 ， 还 是 完全 只 是 在 烦人 。 


27.9 ”小结 



































本 章 我 向 你 展示 了 由 Window 对 象 所 归 组 的 奇特 功能 集合 。 其 中 一 些 功 能 直接 与 窗口 有 关 , 例 
如 获取 浏览 器 窗口 和 所 属 屏幕 的 内 外 尺寸 。 其 他 功能 就 不 那么 直接 相关 了 , 它们 包括 浏览 历史 和 
跨 文 档 消息 传 递 功 能 ， 两 者 都 是 重要 的 HTML5 功 能 。 




















使 用 DOM 元 素 








我 在 前 一 章 讨论 文档 级 功能 时 涉及 了 HTMLELement 对 象 的 某 些 功能 。 现 在 我 们 可 以 把 焦点 转 
移 到 元 素 对 象 本 身 ， 给 予 它 应 有 的 重视 了 。 在 这 一 章 里 ， 我 会 向 你 展示 各 种 不 同 的 HTMLElement 
盟 性 和 方法 ， 并 演示 如 何 使 用 它们 。 表 28-1 提 供 了 这 一 章 的 概要 。 请 注意 ,不 是 所 有 示例 都 能 在 
任意 主流 浏览 器 上 正常 工作 。 



































表 28-1 本章 内 容 概要 



















































































































































































jg] 题 解决 方案 代码 清单 
获取 元 素 的 信息 宙 用 HTMLElement 的 元 数据 属性 28-1 
获取 或 设置 包含 某 个 元 素 所 属 全 ”使 用 className 属 性 28-2 
部 类 的 单个 字符 串 
今 查 或 修改 元 素 的 各 个 类 使 用 classList 属 性 28-3 
获取 或 设置 元 素 的 属性 i attribute, getAttribute, setAttribute, removeAttribute#ll 28-4 ~ 28-6 
hasAttribute 方 法 
获取 或 设置 元 素 的 自 定义 属性 使 用 dataset 属 性 28-5 
操作 元 素 的 文本 内 容 使 用 Text 对 象 28-7~ 28-9 
创建 或 删除 元 素 使 用 以 document.create 开 头 的 方法 以 及 用 于 管理 子 元 素 的 28-10 
HTMLElement 方 法 
复制 元 素 使 用 cloneNode 方 法 28-11 
移动 元 素 使 用 appendChild 方 法 28-12 
比较 两 个 对 象 是 否 相同 d: FHisSameNode77 1: 28-13 
比较 两 个 元 素 是 否 相 同 s FHisEqualNode77 15 28-14 
要 接 操作 HTML 片段 使 用 innerHTML 和 outerHTML 属 性 以 及 insertAdjacentHTML 方 法 28-15 ~ 28-17 
在 文本 块 里 插入 元 素 使 用 splitText 和 appendChild 方 法 28-18 


28.1 使 用 元 素 对 象 


HTMLElement 对 象 提供 了 一 组 属性 ， 你 可 以 用 它们 来 读 取 和 修改 被 代表 元 素 的 数据 。 表 28-2 
介绍 了 这 些 属 性 。 
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表 28-2 元 素数 据 属性 




























































































属 性 说 明 返 E 
checked 获取 或 设置 checked 属 性 是 否 存 在 布尔 值 
classList 获取 或 设置 元 素 所 属 的 类 列表 DOMTokenList 
className 获取 或 设置 元 素 所 属 的 类 列表 字符 串 
dir 获取 或 设置 dir 属 性 的 值 字符 串 
disabled 获取 或 设置 disabled 属 性 是 否 存在 布尔 值 
hidden 获取 或 设置 hidden 属性 是 否 存在 布尔 值 
id 获取 或 设置 id 属 性 的 值 PAT 
lang 获取 或 设置 lang 属 性 的 值 FIFE 
spellcheck 获取 或 设置 spellcheck 属 性 是 否 存 在 布尔 值 
tabIndex 获取 或 设置 tabindex 属 性 的 值 数值 
tagName 返回 标签 名 〈 标识 元 素 类 型 ) 字符 串 
title 获取 或 设置 title 属 性 的 值 字符 串 























代码 清单 28-1 展 示 了 如 何 使 用 表 中 所 列 的 一 些 基 本 属性 。 
代码 清单 28-1 使 用 基本 元 素数 据 属性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
p (border: medium double black;] 
«/style» 
«/head» 
«body» 





«p id-"textblock" dir-"ltr" lang="en-US"> 
There are lots of different& kinds of fruit - there are over 500 varieties 
of «span id-"banana"»banana«/span» alone. By the time we add the countless 
types of «span id="apple">apples</span>, 
«span-"orange"»oranges«/span», and other well-known fruit, we are 
faced with thousands of choices. 
</p> 
<pre id="results"></pre> 
<script> 
var results = document.getElementById("results") ; 
var elem = document.getElementById("textblock"); 





results.innerHTML += "tag: " + elem.tagName + "\n"; 
results.innerHTML += "id: " + elem.id + "\n"; 
results.innerHTML += "dir: " + elem.dir + "\n"; 
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results.innerHTML += "lang: " + elem.lang + "\n"; 
results.innerHTML += "hidden: " + elem.hidden + "An"; 
results.innerHTML += "disabled: " + elem.disabled + "\n"; 














</script> 
</body> 
</html> 
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tag: P 

id: textblock 

dir: ltr 

lang: en-US 

hidden: false 
disabled: undefined 























图 28-1 ”获取 某 个 元 素 的 信息 


28.1.1 使 用 类 

你 可 以 用 两 种 方式 处 理 某 个 元 素 所 属 的 类 。 第 一 种 方式 是 使 用 className 属 性 ， 它 会 返回 一 
个 类 的 列表 。 通 过 改变 这 个 字符 串 的 值 ， 你 就 能 添加 或 移 除 类 。 你 可 以 在 代码 清单 28-2 里 看 到 用 
这 种 方式 来 读 取 和 修改 类 。 

















提示 “类 的 一 个 常见 用 途 是 有 针对 性 地 给 元 素 应 用 样式 。 你 将 在 第 29 章 里 学 会 如 何在 DOM 里 操 
作 样 式 。 


代码 清单 28-2 使 用 className 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
p t 


border: medium double black; 
j 


p.newclass ( 
background-color: grey; 
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color: white; 


</style> 
</head> 
<body> 
<p id="textblock" class="fruit numbers"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<button id="pressme">Press Me</button> 
<script> 
document. getElementById("pressme").onclick = function(e) { 
document .getElementById("textblock").className += " newclass"; 
h 


«/script» 
</body> 
</html> 


在 这 个 例子 中 , 点 击 按钮 会 触发 脚本 , 然后 使 一 个 新 的 类 被 附加 到 元 素 的 类 列表 上 。 请 注意 ， 
我 需要 给 附加 到 className 属 性 的 值 添加 一 个 前 置 空格 。 这 这 是 因为 浏览 器 期 望 获得 由 空格 间隔 的 
类 列表 。 当 我 做 出 这 样 的 修改 后 ,浏览 需 就 会 应 用 那些 基于 类 选择 器 的 样式 ,这 就 意味 着 示例 会 
发 生 明 显 的 视觉 变化 ， 如 图 28-2 所 示 。 
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There are lots of different kinds of fruit - there are over 500 varieties of banana alone. 
By the time we add the countless types of apples, oranges, and other well-known fruit, 
we are faced with thousands of choices. 


Press Me 























图 28-2 ”使 用 className 属 性 


当 你 想 要 快速 给 某 个 元 素 添加 类 时 ，className 属 性 是 易于 使 用 的 ， 但 如 果 你 想 要 做 别 的 事 
( PMET Ea 用 它 就 很 困难 了 。 幸 好， 可 以 使 用 classList 属 性 ， 它 返回 的 是 一 个 
DOMTokenList 对 象 。 这 个 对 象 定 义 了 一 些 有 用 的 方法 和 属性 来 管理 类 列表 ， 如 表 28-3 所 示 。 


表 28-3 ”DOMTokenList 的 成 员 












































成 员 说 — HH 返 g 
add(<class>) 给 元 素 添加 指定 的 类 void 
contains(<class>) 如 果 元 素 属于 指定 的 类 就 返回 true 布尔 值 
length 返回 元 素 所 属 类 的 数量 数值 
remove(<class>) 从 元 素 上 移 除 指定 的 类 void 











toggle(<class>) 如 果 类 不 存在 就 添加 它 ， 如 果 存 在 就 移 除 它 布尔 值 
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除了 这 些 属 性 和 方法 ， 还 可 以 使 用 数组 风格 的 表示 法 ， 通 过 索引 来 获得 类 。 代 码 清单 28-3 展 
示 了 如 何 使 用 DoMTokenList 对 象 。 





代码 清单 28-3 ”使 用 classList 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 

<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 


pt 


border: medium double black; 
j 


p.newclass { 
background-color: grey; 
color: white; 
} 
</style> 
</head> 
<body> 
<p id="textblock" class="fruit numbers"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<pre id="results"></pre> 
<button id="toggle">Toggle Class</button> 
<script> 
var results = document.getElementById("results"); 
document .gettlementById("toggle").onclick = toggleClass; 


listClasses(); 
function listClasses() { 
var classlist = document.getElementById("textblock").classList; 
results.innerHTML = "Current classes: " 
for (var i = 0; i < classlist.length; i++) { 
results.innerHTML += classlist[i] + " "; 
} 


} 


function toggleClass() { 


document .getElementById("textblock").classList.toggle("newclass"); 
listClasses(); 
} 
</script> 
</body> 
</html> 


在 这 个 例子 里 ,listClasses 函 数 使 用 classList 属 性 来 获取 和 枚 举 p 元 素 所 属 的 类 , 并 使 用 数 
组 风格 的 索引 表示 法 来 得 到 类 名 。 














WW 
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toggleClass 函 数 会 在 点 击 按钮 时 被 调用 , 它 使 用 togg1e 方 法 添加 和 移 除 一 个 名 为 newclass 的 
类 。 这 个 类 关联 了 一 个 样式 ， 从 图 28-3 可 以 看 到 类 的 变化 所 带 来 的 视觉 效果 。 
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图 28-3” 枚 举 和 切换 一 个 类 


28.1.2 ”使 用 元 素 属 性 


HTMLElement 对 象 既 有 一 些 属性 来 对 应 最 重要 的 HTML 全 局 属性 , 又 支持 对 单个 元 素 的 任意 属 
性 进行 读 取 和 设置 。 表 28-4 介 绍 了 HTMLElement 对 象 为 这 个 目的 所 定义 的 可 用 方法 和 属性 。 




















表 28-4 与 HTML 属 性 相关 的 属性 和 方法 

































































成 m 说 — Hj ix g 
attributes 返回 应 用 到 元 素 上 的 属性 Attr[] 
dataset 返回 以 data- 开 头 的 属性 字符 串 数 组 [<cname>] 
getAttribute(<name>) 返回 指定 属性 的 值 字符 串 
hasAttribute(<name>) 如 果 元 素 带 有 指定 的 属性 则 返回 true 布尔 值 
removeAttribute(<name>) 从 元 素 上 移 除 指定 属性 void 
setAttribute(<name>, <value>) 应 用 一 个 指定 名 称 和 值 的 属性 void 














这 四 种 操作 属性 的 方法 易于 使 用 ,所 表现 的 行为 也 是 可 预料 的 。 代 码 清 单 28-4 演 示 了 如 何 使 
用 这 些 方法 。 
代码 清单 28-4 ”使 用 属性 方法 


<!DOCTYPE HTML> 





<html> 

<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 

p (border: medium double black;] 

</style> 

</head> 


<body> 
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<p id-"textblock" class="fruit numbers"> 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 

</p> 

<pre id="results"></pre> 

<script> 
var results = document.getElementById("results"); 
var elem = document.getElementById("textblock") ; 





results.innerHTML = "Element has lang attribute: 

sAttribute(' "lang") + "\n"; 
results.innerHTML += "Adding lang attribute\n"; 
elem.setAttribute("lang", "en-US"); 





























results.innerHTML += "Attr value is : " + elem.getAttribute("lang") + "Wn"; 
results.innerHTML += "Set new value for lang attribute\n"; 
elem.setAttribute("lang", "en-UK"); 
results.innerHTML += "Value is now: " + elem.getAttribute("lang") + "n"; 
«/script» 
</body> 
</html> 





在 这 个 例子 里 , 我 检查 、 添 加 并 修改 了 lang 属 性 的 值 。 从 图 28-4 中 可 以 看 到 这 段 脚本 所 产生 
的 效果 。 
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图 28-4 ”使 用 属性 方法 








1. 使 用 以 data- 开 头 的 属性 

第 3 章 中 介绍 了 HTML5 是 如 何 支 持 带 data- 前 缀 的 自 定义 属性 的 ,如 data-mycustomattribute。 
在 DOM 里 可 以 通过 dataset 属 性 来 操作 这 些 自 定义 属性 ， 它 会 返回 一 个 包含 值 的 数组 ， 其 索引 根 
据 的 是 名 称 的 自 定义 部 分 。 代 码 清单 28-5 包 含 了 一 个 例子 。 


代码 清单 28-5 ”使 用 dataset 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 





= 
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<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
p (border: medium double black;] 
</style> 
</head> 
<body> 
«p id="textblock" class="fruit numbers" data-fruit-"apple" data-sentiment-"like"» 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<pre id="results"></pre> 
<script> 
var results = document.getElementById("results") ; 
var elem = document.getElementById("textblock"); 


for (var attr in elem.dataset) { 
results.innerHTML += attr + "\n"; 


} 


results.innerHTML += "Value of data-fruit attr: " + elem.dataset["fruit"]; 
</script> 
</body> 
</html> 


dataset 属 性 返回 的 值 数 组 不 像 通常 的 数组 那样 根据 位 置 进行 索引 。 如 果 你 想 要 枚 举 以 data-*# 
开头 的 各 个 属性 ， 可 以 使 用 一 条 for.. .in 语句 ， 如 示例 所 示 。 除 此 之 外 ， 还 可 以 通过 名 称 来 请 求 
值 。 请 注意 你 只 需要 提供 属性 名 称 的 自 定 义 部 分 。 举 个 例子 , 如 果 想 要 获得 data-fruit 属 性 的 值 ， 
就 应 该 请 求 dataset[ "fruit"] 的 值 。 从 图 28-5 可 以 看 到 这 段 脚 本 的 效果 。 
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Value of data-fruit attr: apple 





























图 28-5 ”使 用 dataset 属 性 











2. 使 用 所 有 属性 
可 以 通过 attributes 属 性 获得 一 个 包含 某 元 素 所 有 属 
成 的 数组 。 表 28-5 介 绍 了 Attr 对 象 的 属性 。 

















集合 ， 它 会 返回 一 个 由 Attr 对 象 构 
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表 28-5 ”Attr 对 象 的 属性 





属 性 说 明 返 回 
name 返回 属性 的 名 称 字符 串 
value 获取 或 设置 属性 的 值 字符 串 




















代码 清单 28-6 展 示 了 如 何 使 用 attributes 属 性 和 Attr 对 象 来 读 取 与 修改 某 个 元 素 的 属性 。 
代码 清单 28-6 ”使 用 attributes 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
p (border: medium double black;] 
</style> 
</head> 
<body> 
<p id-"textblock" class="fruit numbers" data-fruit-"apple" data-sentiment-"like"» 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 
</p> 
<pre id="results"></pre> 
<script> 
var results = document.getElementById("results"); 
var elem = document.getElementById("textblock"); 





var attrs = elem.attributes; 


for (var i = 0; i « attrs.length; i++) { 
results.innerHTML += "Name: " + attrs[i].name + " Value: 
+ attrs[i].value + "\n"; 


" 


} 


attrs["data-fruit"].value = "banana"; 


results.innerHTML += "Value of data-fruit attr: " 
+ attrs["data-fruit"].value; 
</script> 
</body> 


</html> 

正如 你 从 上 面 的 代码 中 看 到 的 ，Attr 对 象 数组 中 的 各 个 属性 同时 根据 位 置 和 名 称 进行 索引 。 
在 这 个 例子 里 ,我 枚 举 了 应 用 到 某 个 元 素 上 的 属性 名 称 和 值 , 然后 修改 了 其 中 一 个 的 值 。 从 图 28-6 
可 以 看 到 这 段 脚 本 的 效果 。 
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图 28-6 ”使 用 attributes 属 





28.2 ”使 用 Text 对 象 


元 素 的 文本 内 容 是 由 Text 对 象 代表 的 ， 它 在 文档 模型 里 表现 为 元 素 的 子 对 象 。 代 码 清单 28-7 
展示 了 带 有 一 段 文本 内 容 的 元 素 。 


代码 清单 28-7 一 个 带 有 文本 内 容 的 元 素 





<p id="textblock" class-"fruit numbers" data-fruit-"apple" data-sentiment-"like"» 
There are lots of different kinds of fruit - there are over 500 varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 


</p> 








当 浏览 器 在 文档 模型 里 生成 p 元 素 的 代表 时 ， 元 素 自身 会 有 一 个 HTMLElement 对 象 ， 内 容 则 会 


有 一 个 Text 对 象 ， 如 图 28-7 所 示 。 
ER 


图 28-7 ”代表 一 个 元 素 和 其 内 容 的 对 象 之 间 的 关系 





如 果 一 个 元 素 拥 有 多 个 子 对 象 且 它 们 都 包含 文本 ， 那 么 这 些 对 象 都 会 以 同样 的 方式 进行 处 
理 。 代 码 清单 28-8 给 这 个 段落 添加 了 一 个 元 素 。 


代码 清单 28-8 ”给 段落 添加 一 个 元 素 


«p id-"textblock" class="fruit numbers" data-fruit-"apple" data-sentiment-"like"» 
There are lots of different kinds of fruit - there are over «b»500«/b» varieties 
of banana alone. By the time we add the countless types of apples, oranges, 
and other well-known fruit, we are faced with thousands of choices. 


</p> 
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b 元 素 的 添加 改变 了 用 于 代表 p 元 素 及 其 内 容 的 节点 层级 结构 ， 如 图 28-8 所 示 。 














图 28-8 ”给 段落 添加 一 个 元 素 后 的 效果 




















p 元 素 的 第 一 个 子 对 象 是 个 Text 对 象 , 它 代 表 从 文本 块 开 头 到 b 元 素 的 文本 。 然后 是 b 元 素 ， 
它 有 着 自己 的 Text 子 对 象 ， 代 表 开始 标签 和 结束 标签 之 间 的 文本 。 接 下 来 是 p 元 素 的 最 后 一 个 
子 对 象 ， 这 个 Text 对 象 代表 b 元 素 之 后 直到 文本 块 末尾 的 文本 。 表 28-6 介 绍 了 Text 对 象 支 持 的 















































成 员 。 
表 28-6 ” Text 对象 的 成 员 
成 员 说 明 返 回 
appendData(<string>) 把 指定 字符 串 附 加 到 文本 块 末尾 void 
data 获取 或 设置 文本 字符 中 
deleteData(<offset>, <count>) 从 文本 中 移 除 字符 串 。 第 一 个 数字 是 偏 移 量 , 第 二 个 是 void 
要 移 除 的 字符 数量 
insertData(<offset>, <string>) 在 指定 偏 移 量 处 插 和 人 指定 字符 串 void 
length 返回 字符 的 数量 数值 
replaceData(«offset», <count>, <string>) ”用 指定 字符 串 蔡 换 一 段 文 本 void 
replaceWholeText(<string>) 替换 全 部 文本 Text 
SCE (ene, 将 现 有 的 Text 元 素 在 指定 偏 移 量 处 一 分 为 二 (这 个 方法 Text 
的 演示 请 参见 28.3.6 节 ) 
substringData(<offset>, <count>) 返回 文本 的 子 串 字符 串 
wholeText 获取 文本 字符 串 

















PERE, 没有 什么 方便 的 方法 能 定位 Text 元 素 ， 只 能 先 找到 它们 的 父 元 素 对 象 ， 然 后 在 其 


子 对 象 中 查找 。 这 使 得 Text 元 素 不 必要 地 难以 使 用 。 代 码 清单 28-9 展 示 了 某 些 Text 元 素 方法 和 
性 的 用 法 。 


代码 清单 28-9 ”处 理 文本 


<!DOCTYPE HTML» 
<html> 
<head> 





E 





B 
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<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
p (border: medium double black;] 
«/style» 
«/head» 


«body» 
«p id-"textblock" class-"fruit numbers" data-fruit-"apple" data-sentiment-"like"» 


There are lots of different kinds of fruit - there are over «b»500«/b» 
varieties of banana alone. By the time we add the countless types of apples, 
oranges, and other well-known fruit, we are faced with thousands of choices. 
</p> 
<button id="pressme">Press Me</button> 
<pre id="results"></pre> 
<script> 
var results = document.getElementById("results") ; 
var elem = document.getElementById("textblock") ; 


document.getElementById("pressme").onclick = function() { 
var textElem = elem. firstChild; 
results.innerHTML = "The element has " + textElem.length + " chars\n"; 


textElem.replaceWholeText("This is a new string "); 
h 
«/script» 
«/body» 
</html> 


当 putton 元 素 被 按 下 ， 我 会 显示 出 p 元 素 第 一 个 Text 子 对 象 里 的 字符 数量 ， 并 用 
replaceWholeText 方 法 修改 它 的 内 容 。 


警告 ”操作 文本 时 有 一 点 需要 注意 : 空白 字符 是 不 会 被 压缩 的 。 这 就 意味 着 你 用 来 组 织 HTML 
结构 的 空格 和 其 他 空白 字符 都 会 被 计算 为 文本 的 一 部 分 。 
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在 之 前 的 几 节 里 ， 我 向 你 展示 了 如 何 使 用 DOM 来 修改 各 个 元 素 。 比 如 ， 你 可 以 修改 它们 的 
属性 和 文本 内 容 。 你 能 够 这 么 做 的 原因 是 文档 自身 与 DOM 之 间 有 着 实时 的 连接 。 一 旦 你 对 DOM 
做 了 改动 , 浏览 器 就 会 让 文档 发 生 相 应 的 变化 。 你 可 以 进一步 利用 这 种 连接 来 改变 文档 自身 的 结 
构 。 你 可 以 按照 任何 你 想 要 的 方式 添加 、 移 除 和 复制 元 素 。 具 体 而 言 就 是 改动 DOM 的 层级 结构 ， 
因为 连接 是 实时 的 ,所 以 你 对 层级 结构 所 做 的 改动 会 立即 反映 到 浏览 需 中 。 表 28-7 介 绍 了 可 用 于 


修改 DOM 层 级 结构 的 属性 和 方法 。 
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表 28-7 DOM 操 纵 成 员 












































成 B 说 明 ig E 
appendChild(HTMLElement) 将 指定 元 素 添加 为 当前 元 素 的 子 元 素 HTMLElement 
cloneNode(boolean) 复制 一 个 元 素 HTMLElement 
compareDocumentPosition(HTMLElement) 判断 一 个 元 素 的 相对 位 置 数值 
innerHTML 获取 或 设置 元 素 的 内 容 PAE 
insertAdjacentHTML(<pos>, <text>) 相对 于 元 素 插 入 HTML void 
insertBefore(<newElem>, <childElem>) 在 第 二 个 CO 元 素 之 前 插入 第 一 个 元 素 HTMLElement 
isEqualNode(«HTMLElement») 判断 指定 元 素 是 否 与 当前 元 素 相同 布尔 值 
isSameNode(HTMLElement) 判断 指定 元 素 是 否 就 是 当前 元 素 布尔 值 
outerHTML 获取 或 设置 某 个 元 素 的 HIML 和 内 容 PAT 
removeChild(HTMLElement) 从 当前 元 素 上 移 除 指定 的 子 元 素 HTMLElement 
replaceChild(HTMLElement, HTMLElement) 替换 当前 元 素 的 某 个 子 元 素 HTMLElement 28 








这 些 属 性 和 方法 对 所 有 元 素 对 象 都 是 可 用 的 。 另 外 ，document 对 象 定义 了 两 个 允许 你 创建 新 
元 素 的 方法 。 当 你 想 给 文档 添加 内 容 时 它们 至 关 重 要 。 表 28-8 介 绍 了 这 些 创 建 方法 。 











表 28-8 DOM 操 纵 成 员 





成 员 说 明 ik [s] 
createElement («tag») 创建 一 个 属于 指定 标签 类 型 的 新 HTMLElement 对 象 HTMLElement 
createTextNode(«text») 创建 一 个 带 有 指定 内 容 的 新 Text 对 象 Text 








28.3.1 创建 和 删除 元 素 


你 需要 通过 document 对 象 创 建新 的 元 素 , 然后 找到 一 个 现存 的 HTMLElement, 并 使 用 之 前 介绍 
的 某 种 方法 来 插入 它们 。 代 码 清单 28-10 对 此 进行 了 演示 。 























代码 清单 28-10 ”创建 和 删除 元 素 


<!DOCTYPE HTML> 
«html» 
«head» 

<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
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table { 
border: solid thin black; 
border-collapse: collapse; 
margin: 10px; 
} 
td { padding: 4px 5px; } 
</style> 
</head> 
<body> 
<table border="1"> 
<thead><th>Name</th><th>Color</th></thead> 
<tbody id="fruitsBody"> 
<tr><td>Banana</td><td>Yellow</td></tr> 
<tr><td>Apple</td><td>Red/Green</td></tr> 
</tbody> 
</table> 


<button id="add">Add Element</button> 
<button id="remove">Remove Element</button> 


<script> 
var tableBody = document.getElementById("fruitsBody") ; 


document.getElementById("add").onclick = function() { 
var row = tableBody.appendChild(document.createElement("tr")); 
row.setAttribute("id", "newrow"); 
row. appendChild(document.createElement("td")) 
-appendChild(document.createTextNode("Plum")); 
row.appendChild(document.createElement("td")) 
.appendChild(document.createTextNode("Purple")); 
h 


document.getElementById("remove").onclick = function() { 
var row - document.getElementById("newrow"); 
row.parentNode.removeChild(row); 
} 
</script> 
</body> 
</html> 





这 个 例子 中 的 脚本 使 用 DOM 来 添加 和 移 除 一 张 HTML table 的 行 (第 11 章 介绍 过 )。 在 

















行 时 ， 我 会 首先 创建 一 个 tr 元素 ， 然 后 把 它 作 为 td 和 Text 对 象 的 父 元 素 。 请 注意 我 是 怎 相 








法 返回 的 结果 进行 链 式 调用 的 ， 这 样 做 同时 也 ( 略微 ) 简化 了 代码 。 


ali 











添加 





HJr 


如 你 所 见 , 创建 元 素 的 过 程 很 辛苦 。 你 需要 创建 元 素 ， 把 它 与 父 元 素 进 行 关 联 ， 然 后 对 所 有 
的 子 元 素 或 文本 内 容重 复 这 一 过 程 。 移 除 元 素 的 过 程 同 样 很 别扭 。 必 须 找 到 元 素 ， 导 航 至 它 的 父 

















元 素 ， 然 后 使 用 removeChild 方 法 。 从 图 28-9 可 以 看 到 这 段 脚本 的 效果 。 
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图 28-9 使 用 DOM 来 创建 和 移 除 元 素 























28.3.2 ”复制 元 素 
可 以 使 用 cloneNode 方 法 来 复制 现 有 的 元 素 。 这 个 方法 有 时 候 很 方便 ， 因 为 它 允 许 你 不 必 从 
头 开始 创建 想 要 的 元 素 。 代 码 清单 28-11 演 示 了 这 种 技巧 。 


代码 清单 28-11 复制 元 素 


<!DOCTYPE HTML> 


«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content="A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
table { 
border: solid thin black; 
border-collapse: collapse; 
margin: 10px; 
} 
td { padding: 4px 5px; } 
</style> 
</head> 
<body> 


<table border="1"> 
<thead><tr><th>Multiply</th><th>Result</th></tr></thead> 


<tbody id="fruitsBody"> 
<tr><td class="sum">1 x 1</td><td class="result">1</td></tr> 


</tbody> 
</table> 


<button id="add">Add Row</button> 


<script> 
var tableBody = document.getElementById("fruitsBody") ; 


document.getElementById("add").onclick = function() { 
var count = tableBody.getElementsByTagName("tr").length + 1; 





592 第 28 章 使 用 DOM 元 素 





var newElem = tableBody.getElementsByTagName("tr")[0].cloneNode(true); 
newElem.getElementsByClassName("sum")[0].firstChild.data = count 

+"* "+ count; 
newElem.getElementsByClassName("result")[0].firstChild.data = 

count * count; 


tableBody.appendChild(newElem); 
B 
</script> 
</body> 
</html> 


在 这 个 例子 中 ， 我 通过 复制 表格 里 现 有 的 一 行 来 创建 更 多 的 行 。cloneNode 方 法 的 布尔 值 参 








数 指定 了 是 否 应 该 同时 复制 该 元 素 的 所 有 子 元 素 。 在 这 个 例子 中 , 我 将 它 设 为 true， 因 为 我 想 让 
tr 元 素 所 含 的 那些 td 元 素 构筑 起 新 行 的 结构 。 


提示 请 注意 示例 中 为 了 设置 单元 格 文本 而 使 用 的 别扭 方法 。 处 理 Text 对 象 真 的 很 让 人 头 疫 。 
还 有 一 种 更 加 简单 的 方法 ， 请 参见 28.3.5 节 。 


28.3.3 BJNE 
要 把 元 素 从 文档 的 一 处 移 到 另 一 处 ， 需 要 做 的 仅仅 是 把 待 移动 的 元 素 关联 到 新 的 父 元 素 上 ， 





























而 不 需要 让 该 元 素 脱离 它 的 初始 位 置 。 代 码 清 单 28-12 通 过 把 表格 的 某 一 行 移 至 另 一 个 表格 对 此 











进行 了 演示 。 


代码 清单 28-12 ”移动 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
table ( 
border: solid thin black; 
border-collapse: collapse; 
margin: 10px; 
float: left; 





td ( padding: 4px 5px; ] 
p { clear:left; } 
«/style» 
«/head» 
«body» 
«table border="1"> 
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<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 
<tbody> 
<tr><td>Banana</td><td>Yellow</td></tr> 
<tr id="apple"><td>Apple</td><td>Red/Green</td></tr> 
</tbody> 
</table> 


<table border="1"> 
<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 

<tbody id="fruitsBody"> 

<tr><td>Plum</td><td>Purple</td></tr> 

</tbody> 

</table> 








<p> 
<button id="move">Move Row</button> 
</p> 
<script> 
document.getElementById("move").onclick = function() { 
var elem = document.getElementById("apple"); 
document .getElementById("fruitsBody") .appendChild(elem) ; 
B 
</script> 
</body> 
</html> 


当 button 元 素 被 按 下 后 ， 脚 本 会 移动 id 为 apple 的 tr 元 素 ， 具 体 做 法 是 在 id 为 fruitsBody 的 
tbody 元 素 上 调用 appendChild 方 法 。 这 么 做 就 实现 了 把 该 行 从 一 个 表格 移动 到 另 一 个 表格 的 效果 ， 
如 图 28-10 所 示 。 
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28-10 ”把 元 素 从 文档 的 一 处 移 至 另 一 处 





28.3.4 比较 元 素 对 象 


可 以 通过 两 种 方式 来 比较 元 素 对象 。 第 一 种 方式 是 简单 地 检查 它们 是 否 代表 了 同一 个 元 素 ， 
用 issameNode 方 法 可 以 做 到 这 一 点 。 这 让 你 能 够 比较 从 不 同 查 询 中 获得 的 对 象 , 如 代码 清单 28-13 
所 示 。 
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代码 清单 28-13 ”比较 元 素 对 象 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
table { 
border: solid thin black; 
border-collapse: collapse; 
} 
td { padding: 4px 5px; } 
</style> 
</head> 
<body> 
<table border="1"> 
<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 
<tbody id="fruitsBody"> 
«tr id-"plumrow"»«td»Plum«/td»«td»Purple«/td»«/tr» 
«/tbody» 
«/table» 
«pre id-"results"»«/pre» 
«script» 
var elemByID = document.getElementById("plumrow"); 
var elemByPos 
= document.getElementById("fruitsBody").getElementsByTagName("tr")[0]; 
if (elemByID.isSameNode(elemByPos)) ( 
document.getElementById("results").innerHTML = "Objects are the same"; 
} 
</script> 
</body> 
</html> 





此 示例 中 的 脚本 用 了 两 种 不 同 的 技巧 来 定位 元 素 对 象 : 通过 id 搜索 和 通过 父 元 素 里 的 标签 类 
型 搜索 。isSameNode 方 法 在 比较 这 些 对 象 时 会 返回 true， 因 为 它们 代表 的 是 同一 个 元 素 。 

男 一 种 方式 是 测试 元 素 对 象 是 否 相 同 ， 可 以 用 isEqualNode 方 法 做 到 这 一 点 。 如 果 多 个 元 素 
具有 相同 的 类 型 ， 带 有 相同 的 属性 值 ， 其 子 元 素 也 相同 并 且 顺 序 一 致 ,那么 它们 就 是 相同 的 。 代 
码 清单 28-14 演 示 了 一 对 相同 的 元 素 。 


代码 清单 28-14 ”使 用 相同 的 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
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<meta name="description" content="A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
table ( 
border: solid thin black; 
border-collapse: collapse; 
margin: 2px Opx; 





} 
td { padding: 4px 5px; } 
</style> 
</head> 
<body> 
<table border="1"> 
<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 
<tbody> 
<tr class="plumrow"><td>Plum</td><td>Purple</td></tr> 
</tbody> 
</table> 


<table border="1"> 
<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 
<tbody> 
<tr class="plumrow"><td>Plum</td><td>Purple</td></tr> 
</tbody> 

</table> 











<pre id="results"></pre> 
<script> 
var elems = document.getElementsByClassName("plumrow"); 


if (elems[0].isEqualNode(elems[1])) { 

document .getElementById("results").innerHTML = "Elements are equal"; 
} else { 

document .getElementById("results").innerHTML = "Elements are NOT equal"; 
} 


</script> 
</body> 
</html> 


在 这 个 例子 里 , 虽然 两 个 tr 元 素 各 自 独立 存在 并 处 于 文档 的 不 同位 置 , 但 它们 是 相同 的 。 如 
果 我 改变 了 其 中 的 任何 属性 或 者 td 子 元 素 里 的 内 容 ， 那 么 这 两 个 元 素 就 不 再 是 相同 的 了 。 




















28.3.5 ”使 用 HTML 片段 

innerHTML 属 性 ,outerHTML 属 性 和 insertAdjacentHTML 方 法 都 是 便利 的 语法 捷径 , 它们 让 你 能 
够 使 用 HTML 片 段 , 从 而 不 再 需要 创建 元 素 和 文本 对 象 的 详细 层级 结构 。 代码 清单 28-15 演 示 了 如 
何 使 用 innerHTML 和 outerHTML 属 性 从 元 素 中 获取 HTML 片段 。 


代码 清单 28-15 ”使 用 innerHTML 和 outerHTML 属 性 


<!DOCTYPE HTML> 
<html> 





























ni 
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<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style» 
table ( 
border: solid thin black; 
border-collapse: collapse; 
margin: 5px 2px; 
float: left; 





j 
td ( padding: 4px 5px; ] 
p (clear: left]; 
«/style» 
«/head» 
«body» 
«table border="1"> 
<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 


<tbody> 
«tr id="applerow"><td>Plum</td><td>Purple</td></tr> 
</tbody> 
</table> 
«textarea rows="3" id="results"></textarea> 


<p> 
<button id="inner">Inner HTML</button> 
<button id="outer">Outer HTML</button> 

</p> 

<script> 
var results = document.getElementById("results") ; 
var row = document.getElementById("applerow"); 


document.getElementById("inner").onclick = function() { 
results.innerHTML = row. innerHTML; 


h 


document.getElementById("outer").onclick = function() { 
results.innerHTML = row.outerHTML; 


} 


</script> 
</body> 
</html> 


outerHTML 属 性 返回 一 个 字符 串 ， 它 包含 定义 这 个 元 素 及 其 所 有 子 元 素 的 HTML。innerHTML 
属性 则 只 返回 子 元 素 的 HTML。 在 这 个 例子 里 , 我 定义 了 一 对 按钮 来 显示 某 个 表格 行 的 内 部 和 外 
部 HTML。 我 选择 在 一 个 textarea 元 素 里 显示 内 容 ， 这 样 浏览 器 就 会 把 这 些 属性 返回 的 字符 串 视 
作文 本 ， 而 非 HIML。 从 图 28-11 可 以 看 到 这 段 脚 本 的 效果 。 

1. 改变 文档 结构 

你 也 可 以 使 用 outerHTML 和 innerHTML 属 性 来 改变 文档 的 结构 。 我 在 本 书 这 一 部 分 的 许多 例子 
里 都 使 用 了 innerHTML 属 性 , 将 它 作 为 一 种 设置 元 素 内 容 的 简便 方法 , 这 是 因为 我 不 需要 创建 Text 
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元 素 就 可 以 使 用 该 属性 来 设置 文本 内 容 。 代 码 清 单 28-16 展 示 了 如 何 使 用 这 些 属 性 来 修改 文档 
模型 。 
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图 28-11 显示 某 个 表格 行 的 outerHTML 属 性 





代码 清单 28-16 ”修改 文档 模型 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style» 
table ( 
border: solid thin black; 
border-collapse: collapse; 
margin: 10px; 
float: left; 





} 
td { padding: 4px 5px; } 
p { clear:left; } 
</style> 
</head> 
<body> 
<table border="1"> 
<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 
<tbody> 
<tr><td>Banana</td><td>Yellow</td></tr> 
«tr id="apple"><td>Apple</td><td>Red/Green</td></tr> 
</tbody> 
</table> 


<table border="1"> 
<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 
<tbody id="fruitsBody"> 
<tr><td>Plum</td><td>Purple</td></tr> 
<tr id="targetrow"><td colspan="2">This is the placeholder</td></tr> 
</tbody> 
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</table> 


<p> 
<button id="move">Move Row</button> 
</p> 
<script> 
document. getElementById("move").onclick = function() { 
var source = document.getElementById("apple"); 
var target = document.getElementById("targetrow"); 
target.innerHTML = source.innerHTML; 
source.outerHTML = ‘<tr id-"targetrow"»«td colspan="2">' + 
"This is the placeholder</td>' ; 
h 
</script> 
</body> 
</html> 


在 这 个 例子 里 ， 我 用 innerHTML 属 性 设置 了 某 个 表格 行 的 子 元 素 ， 并 用 outerHTML 内 联 蔡 换 了 
某 个 元 素 。 这 些 属 性 处 理 的 是 字符 串 , 这 就 意味 着 你 可 以 通过 读 取 属性 值 或 从 头 创建 字符 串 来 得 
到 HTML 片 段 ， 如 前 面 的 代码 清单 所 示 。 从 图 28-12 可 以 看 到 它 的 效果 。 
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图 28-12 ”使 用 innerHTML 和 outerHTML 属 性 


2. 插入 HTML 片 段 
innerHTML 和 outerHTML 属 性 对 于 替换 现 有 的 元 素 而 言 是 很 有 用 的 ， 但 是 如 果 你 想 要 用 HTML 
片段 来 插入 新 元 素 ， 就 必须 使 用 insertAdjacentHTML 方 法 。 这 个 方法 需要 两 个 参数 : 第 一 个 参数 
是 表 28-9 中 的 某 个 值 ， 它 指明 片段 应 该 被 插入 到 相对 于 当前 元 素 的 哪个 位 置 ， 第 二 个 参数 是 要 插 
人 的 片段 。 





















































表 28-9 insertAdjacentHTML 方 法 的 定位 参数 值 
值 说 明 
afterbegin 将 片段 作为 当前 元 素 的 第 一 个 子 元 素 插 入 
afterend 将 片段 插入 当前 元 素 之 后 
beforebegin 将 片段 插入 当前 元 素 之 前 
beforeend 将 片段 作为 当前 元 素 的 最 后 一 个 子 元 素 搬 入 
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代码 清单 28-17 展 示 了 如 何 使 用 insertAdjacentHTML 方 法 将 HTML 片段 插入 某 个 表格 行 元 素 
的 内 部 和 周围 。 


代码 清单 28-17 使 用 insertAdjacentHTML 方 法 


<!DOCTYPE HTML> 
«html» 
«head» 

«title»Example«/title» 

«meta name-"author" content-"Adam Freeman"/» 

«meta name-"description" content-"A simple example"/» 

«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 

«/head» 
«body» 

«table border="1"> 
<thead><tr><th>Fruit</th><th>Color</th></tr></thead> 
<tbody id="fruitsBody"> 

«tr id-"targetrow"»«td»Placeholder«/td»«/tr» 
«/tbody» 
«/table» 





«p» 
«button id-"ab"»After Begin«/button» 
«button id="ae">After End</button> 
<button id="bb">Before Begin</button> 
<button id="be">Before End</button> 
</p> 
<script> 
var target = document.getElementById("targetrow"); 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 











} 


function handleButtonPress(e) { 
if (e.target.id == "ab") { 
target.insertAdjacentHTML("afterbegin", "<td>After Begin</td>"); 
} else if (e.target.id == "be") { 
target.insertAdjacentHTML("beforeend", "<td>Before End«/td»"); 
) else if (e.target.id -- "bb") ( 
target.insertAdjacentHTML(" beforebegin", 
"<tr><td colspan='2'>Before Begin«/td»«/tr»"); 
} else { 
target .insertAdjacentHTML("afterend", 
"<tr><td colspan='2'>After End</td></tr>"); 


} 


</script> 
</body> 
</html> 


在 这 个 例子 里 , 我 使 用 不 同 的 定位 值 来 演示 如 何 将 HTML 片 段 插入 不 同 的 位 置 。 这 个 例子 最 
好 的 理解 方式 是 在 浏览 器 中 实际 操作 一 下 ， 不 过 从 图 28-13 也 可 以 看 到 它 的 基本 效果 。 
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图 28-13 ”将 HTML 片段 搬入 文档 


28.3.6 ”向 文本 块 插 入 元 素 


修改 模型 的 男 一 种 重要 方式 是 向 由 Text 对 象 代表 的 文本 块 添加 元 素 。 代 码 清单 28-18 展 示 了 
具体 的 做 法 。 


代码 清单 28-18 ”将 一 个 元 素 插 入 文本 块 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«/head» 
«body» 
«p id-"textblock"»There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 
</p> 
<p> 
<button id="insert">Insert Element</button> 
</p> 
<script> 
document .getElementById("insert").onclick = function() { 
var textBlock = document.getElementById("textblock"); 
textBlock.firstChild.splitText(10); 
var newText = textBlock.childNodes[1].splitText(4).previousSibling; 
textBlock.insertBefore(document.createElement("b"), 
newText) .appendChild(newText); 
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</script> 
</body> 
</html> 


在 这 个 例子 里 , 我 完成 了 一 项 稍 有 难度 的 任务 ， 即 从 现 有 的 文本 取出 一 个 单词 ， 然 后 让 它 变 
成 新 元 素 b 的 一 个 子 元 素 。 和 之 前 这 些 例 子 一 样 ， 对 模型 进行 操作 就 意味 着 要 写 一 些 繁琐 的 代码 。 








图 28-14 展 示 了 结果 。 
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图 28-14 ”向 文本 块 搬入 一 个 元 素 


28.4 ”小结 

这 一 章 介绍 了 HTMLElement 和 Text 对 象 的 功能 , 它们 分 别 代 表 HTML 文档 里 的 元 素 和 内 容 。 你 
看 到 了 如 何 从 对 象 上 获取 元 素 信息 ， 如 何 操作 文本 内 容 ， 以 及 如 何 利 用 DOM 的 功能 来 添加 、 修 
改 、 复 制 、 移 动 和 删除 元 素 。 使 用 DOM 有 时 候 需要 编写 繁琐 的 脚本 代码 ， 但 是 因为 有 了 对 象 模 
型 和 文档 对 用 户 的 显示 方式 之 间 的 实时 连接 ， 所 以 这 些 努力 都 是 值得 的 。 





为 DOM 元 素 设 置 样式 

















你 可 能 会 记得 我 在 第 4 章 曾 经 提 到 过 , 可 以 给 元 素 间 接 ( 通过 样式 表 或 style 元 素 ) 或 直接 ( 通 
过 style 属 性 ) 应 用 样式 。 在 这 一 章 ， 我 将 向 你 展示 如 何 用 DOM 操 作文 档 中 的 CSS 样 式 ， 这 些 样 
式 既 包括 你 显 式 定 义 的 ， 也 包括 浏览 器 用 来 实际 显示 元 素 的 计算 样式 (computed style )。 关 于 在 
DOM 中 处 理 样式 的 规范 包含 了 一 些 复杂 的 对 象 类 型 结构 ， 其 中 不 少 还 没有 被 浏览 器 实现 。 我 简 
化 了 本 章 介绍 的 对 象 ， 把 焦点 放 在 浏览 器 实际 使 用 的 那些 上 。 表 29-1 提 供 了 本 章 的 内 容 概要 。 请 
注意 不 是 所 有 的 例子 都 能 在 各 种 主流 浏览 器 上 运行 。 
























































表 29-1 本章 内 容 概要 

























































































































































































问 题 解决 方案 代码 清单 
获取 某 个 样式 表 的 基本 信息 s FCSSStyleSheet lag HE 29-1 
获取 应 用 到 某 个 样式 表 上 的 媒介 限制 详情 重用 MediaList 对 象 29-2 
利用 或 禁用 样式 表 喝 用 CSsstylesheet 对 象 的 disabled 属 性 29-3 
获取 某 个 样式 表 内 定义 的 单个 样式 细节 使 用 CSSRuleList 和 CSSStyleRule 对 象 29-4 
从 元 素 的 style 属 性 获取 样式 哆 用 HTML.style 属 性 29-5 
获取 或 设置 核心 CSS 属 性 的 值 例 用 CSsstyleDeclaration 对 象 提供 的 便捷 属性 29-6 
获取 或 设置 所 有 CSS 属 性 使 用 setProperty 和 getPropertyValue 方 法 29-7 
探查 某 个 样式 里 的 属性 用 length 属 性 和 getPropertyValue 方 法 枚 举 样式 29-8 
获取 或 设置 属性 优先 级 使 用 getPropertyPriority 和 setProperty 方 法 29-9 
操作 细 粒 度 的 CSS DOM 对 象 使 用 getpPropertyCSSValue 方 法 29-10 
获取 某 个 元 素 的 计算 样式 使 用 document.defaultView.getComputedStyle 方 法 29-11 








29.1 使 用 样式 表 


可 以 通过 document .styleSheets 属 性 访问 文档 中 可 用 的 CSS 样 式 表 ,， 它 会 返回 一 组 对 象 集合 ， 
这 些 对 象 代 表 了 与 文档 关联 的 各 个 样式 表 。 表 29-2 概 述 了 document.styleSheets 属 性 。 
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表 29-2 访问 样式 表 
属 性 说 8j 返回 


document . stylesheets 返回 样式 表 的 集合 CSSStyleSheet[] 























每 个 样式 表 都 由 一 个 CSSstyleSheet 对 象 代表 ， 它 提供 了 一 组 属性 和 方法 来 操作 文档 里 的 样 
式 。 表 29-3 概 述 了 CSSstyleSsheet 的 成 员 。 


表 29-3 CssstyleSheet 对 象 的 成 员 




































































成 A 说 — RB i& E 
cssRules 返回 样式 表 的 规则 集合 CSSRulelist 
deleteRule(«pos») 从 样式 表 中 移 除 一 条 规则 void 
disabled 获取 或 设置 样式 表 的 禁用 状态 布尔 值 
href 返回 链接 样式 表 的 href 字符 串 
insertRule(<rule>, <pos>) 插入 一 条 新 规则 到 样式 表 中 数值 
media 返回 应 用 到 样式 表 上 的 媒介 限制 集合 MediaList 
ownerNode 返回 样式 所 定义 的 元 素 HTMLElement 
title 返回 title 属 性 的 值 字符 串 
type 返回 type 属 性 的 值 字符 串 

















29.1.1 获得 样式 表 的 基本 信息 
第 一 步 是 获得 定义 在 文档 中 的 样式 表 的 一 些 基本 信息 。 代 码 清单 29-1 对 此 进行 了 演示 。 
代码 清单 29-1 ”获得 文档 内 样式 表 的 基本 信息 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style title-"core styles"> 
pt 
border: medium double black; 
background-color: lightgray; 








) 

#block1 ( color: white;} 

table (border: thin solid black; border-collapse: collapse; 
margin: 5px; float: left;) 
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td {padding: 2px;} 

</style> 

<link rel="stylesheet" type="text/css" href="styles.css"/> 

<style media="screen AND (min-width:500px)" type="text/css"> 
#block2 {color:yellow; font-style: italic} 

</style> 

</head> 
<body> 

<p id="block1">There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 

</p> 

<p id="block2"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 

</p> 

<div id="placeholder"/> 

<script> 
var placeholder = document.getElementById("placeholder") ; 
var sheets = document.styleSheets; 


for (var i = 0; i « sheets.length; i++) ( 
var newElem - document.createElement("table"); 
newElem.setAttribute("border", "1"); 
addRow(newElem, "Index", i); 
addRow(newElem, "href", sheets[i].href); 
addRow(newElem, "title", sheets[i].title); 
addRow(newElem, "type", sheets[i].type); 
addRow(newElem, "ownerNode", sheets[i].ownerNode.tagName); 
placeholder.appendChild(newElem); 
} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 


} 
</script> 
</body> 
</html> 


这 个 例子 中 的 脚本 枚 举 了 文档 内 定义 的 所 有 样式 表 ， 并 为 每 个 样式 表 都 创建 了 一 个 table 元 
素 以 容纳 可 用 的 基本 信息 。 这 个 文档 里 有 三 个 样式 表 。 其 中 两 个 是 用 script 元 素 定义 的 ， 男 一 个 
则 包含 在 名 为 styles.css 的 外 部 文件 里 ， 是 通过 1ink 元 素 导 入 文档 中 的 。 从 图 29-1 可 以 看 到 脚本 输 
出 的 结果 。 

请 注意 ,不 是 所 有 的 属性 都 带 有 值 。 举 个 例子 ，href 属 性 只 有 在 样式 表 由 外 部 文件 载 人 时 才 


会 返回 一 个 值 。 
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One of the most interesting aspects of fruit is the variety available in each country. 1 live near 
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图 29-1 ”获得 文档 内 样式 表 的 基本 信息 


29.1.2 ”使 用 媒介 限制 


正如 我 在 第 7 章 所 演示 的 ， 当 你 定义 样式 表 时 可 以 使 用 media 属 性 来 限制 样式 应 用 的 场合 。 可 29 
以 使 用 CSsstyleSsheet.media 属 性 访问 这 些 限 制 ， 它 会 返回 一 个 MediaList 对 象 。 表 29-4 介 绍 了 
Medialist 对 象 的 方法 和 属性 。 











表 29-4 MedialList 对 象 的 成 员 






































Rom 说 明 iR [s] 
appendMedium(«medium») 添加 一 个 新 媒介 到 列表 中 void 
deleteMedium(«medium») 从 列表 中 移 除 一 个 媒介 void 
item(<pos>) 返回 指定 索引 的 媒介 字符 串 
length 返回 媒介 的 数量 数值 
mediaText 返回 media 属 性 的 文本 值 字符 串 











代码 清单 29-2 演 示 了 如 何 使 用 Medialist 对 象 。 
代码 清单 29-2 使 用 Medialist 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content="A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style title-"core styles"> 


pt 
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border: medium double black; 
background-color: lightgray; 
} 
#block1 { color: white;} 
table {border: thin solid black; border-collapse: collapse; 
margin: 5px; float: left;} 
td {padding: 2px;} 
</style> 
<link rel="stylesheet" type="text/css" href="styles.css"/> 
<style media="screen AND (min-width:500px), PRINT" type="text/css"> 
#block2 {color:yellow; font-style: italic} 
</style> 
</head> 
<body> 
<p id="block1">There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 
</p> 
<p id="block2"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 


its apples. 
</p> 
<div id="placeholder"/> 
<script> 


var placeholder = document.getElementById("placeholder"); 
var sheets = document.styleSheets; 


for (var i = 0; i < sheets.length; i++) { 
if (sheets[i].media.length > 0) { 
var newElem = document.createElement("table"); 
newElem.setAttribute("border", "1"); 
addRow(newElem, "Media Count", sheets[i].media. length); 
addRow(newElem, "Media Text", sheets[i].media.mediaText); 
for (var j =0; j « sheets[i].media.length; j++) { 
addRow(newElem, "Media " + j, sheets[i].media.item(j)); 


} 
placeholder.appendChild(newElem); 


} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 
} 
</script> 
</body> 
</html> 


在 这 个 例子 里 ， 我 为 所 有 具备 media 属 性 的 样式 表 分 别 创建 了 一 张 表 格 ， 并 枚 举 了 其 中 的 各 
个 媒介 、 属 性 值 里 的 媒介 总 数 和 整个 media 字 符 串 。 从 图 29-2 可 以 看 到 这 段 脚本 的 效果 。 
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图 29-2 ”使 用 MediaList 对 象 








29.1.3 ”禁用 样式 表 


CSSStyleSheet .disabled 属 性 可 用 来 一 次 性 启用 和 禁用 某 个 样式 表 里 的 所 有 样式 。 代 人 码 清 
单 29-3 演 示 了 如 何 使 用 这 个 属性 来 切换 样式 表 的 开启 和 关闭 。 


代码 清单 29-3 ”启用 和 禁用 样式 表 Em 


«IDOCTYPE HTML» 














«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style title-"core styles"> 
p { 
border: medium double black; 
background-color: lightgray; 
} 
#block1 ( color: white; border: thick solid black; background-color: gray; } 
</style> 
</head> 
<body> 
«p id-"blocki"»There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 
</p> 
<div><button id="pressme">Press Me </button></div> 
<script> 
document .getElementById("pressme").onclick = function() { 
document.styleSheets[0].disabled = !document.styleSheets[0].disabled; 
} 
</script> 
</body> 


</html> 
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在 这 个 例子 里 ， 点 击 按钮 会 切换 (唯一 一 个 ) 样式 表 上 disabled 属 性 的 值 。 


被 禁用 ， 它 所 包含 的 任何 样式 都 不 会 被 应 用 到 元 素 上 ， 如 图 29-3 所 示 。 
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图 29-3 ”禁用 和 启用 样式 表 











29.1.4 CSSRuleList 对 象 的 成 员 


CSSStyleSheet .cssRules 属 性 会 返回 一 个 CSSRuleList 对 象 ， 它 允许 你 访问 样式 表 里 的 各 种 样 


式 。 表 29-5 介 绍 了 这 个 对 象 的 成 员 。 


表 29-5 CSsRulelList 对 象 的 成 员 





























成 RB 说 明 返 回 
item(<pos>) 返回 指定 索引 的 CSS 样 式 CSSStyleRule 
length 返回 样式 表 里 的 样式 数量 数值 

样式 表 里 的 每 一 种 CSS 样 式 都 由 一 个 CSSSstyleRule 对 象 代表 ( 如 果 你 愿意 ， 可 以 忽略 这 种 不 
一 致 的 命名 方式 )。 表 29-6 展 示 了 CSSStyleRule 的 成 员 。 
表 29-6 (CSSStyleRule 对 象 的 成 员 

成 员 说 — HB & E 
cssText 获取 或 设置 样式 的 文本 〈 包括 选择 器 ) 字符 串 
parentStyleSheet 获取 此 样式 所 属 的 样式 表 CSSStyleSheet 
selectorText 获取 或 设置 样式 的 选择 器 文本 字符 串 
style 获取 一 个 代表 具体 样式 属性 的 对 象 CSSStyleDeclaration 




















代码 清单 29-4 展 示 了 CSSRuleList 对 象 的 用 法 和 CSSStyleRule 对 象 的 基本 
为 style 属 性 所 返回 的 CSSStyleDeclaration 对 象 让 你 可 以 深入 样式 的 内 部 ， 而 | 

















属性 。 我 说 基本 是 因 





日 你 给 某 个 元 素 应 


用 样式 时 用 的 也 是 这 个 对 象 。 你 可 以 在 29.3 节 进一步 了 解 CSSStyleDeclaration 对 象 。 


代码 清单 29-4 ”使 用 CSSRuleList 和 CSSStyleRule 对 象 


<!DOCTYPE HTML> 
<html> 


29.1 使 用 样式 表 


609 





<head> 
<title>Example</title> 
«meta name-"author" content="Adam Freeman" /> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style title-"core styles"> 
p t 
border: medium double black; 
background-color: lightgray; 
} 
#block1 ( color: white; border: thick solid black; background-color: gray; } 
table {border: thin solid black; border-collapse: collapse; 
margin: 5px; float: left; } 
td {padding: 2px;} 
</style> 
</head> 
<body> 
<p id-"blocki"»There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 
</p> 
<p id="block2"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 
</p> 
<div><button id="pressme">Press Me </button></div> 
<div id="placeholder"></div> 





<script> 
var placeholder = document.getElementById("placeholder") ; 
processStyleSheet(); 


document.getElementById("pressme").onclick = function() { 
document.styleSheets[0].cssRules.item(1).selectorText = "#block2"; 


if (placeholder.hasChildNodes()) { 
var childCount = placeholder.childNodes. length; 
for (var i = 0; i < childCount; i++) ( 
placeholder.removeChild(placeholder.firstChild); 
} 


} 
processStyleSheet(); 


) 


function processStyleSheet() { 
var rulesList = document.styleSheets[0].cssRules; 


for (var i = 0; i < rulesList.length; i++) { 
var rule = rulesList.item(i); 


var newElem = document.createElement("table") ; 
newElem.setAttribute("border", "1"); 
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addRow(newElem, "parentStyleSheet", rule.parentStyleSheet.title); 
addRow(newElem, "selectorText", rule.selectorText); 
addRow(newElem, "cssText", rule.cssText); 
placeholder.appendChild(newElem); 


} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 
} 
</script> 
</body> 
</html> 


上 面 的 例子 对 这 些 对 象 做 了 两 件 事 。 第 一 件 事 是 简单 地 获取 已 定义 样式 的 信息 , 报告 它 的 父 
样式 表 、 选 择 咒 和 样式 所 包含 的 各 条 规则 声明 。 从 图 29-4 可 以 看 到 它们 。 
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There are lots of diferent kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples. 
oranges, and other well-known fruit, we are faced with thousands of choices. 
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图 29-4 ”获取 某 个 样式 的 信息 








请 注意 我 在 样式 声明 里 所 用 的 简写 属 ， dus 经 被 浏览 器 扩展 成 了 它 的 各 个 组 成 部 分 

所 有 的 浏览 器 都 会 这 么 做 ， 有 些 浏 览 器 会 在 你 使 用 简写 属性 时 直接 显示 它们 ( 
Firefox 浏 览 器 会 显示 简写 属性 , 而 图 中 的 Chrome 就 不 会 )， 如 果 你 试图 把 CSS 作 为 字符 囊 
进行 解析 ， ne 要 考虑 到 这 一 点 。 不 过 ， 通 常 而 言 ， 像 这 样 直接 处 理 CSS 的 值 不 是 一 
个 好 主意 。 更 好 的 方式 请 参见 本 章 后 面 关 于 CSSStyleDeclaration 对 象 的 29.3 节 。 


提示 





这 段 脚 本 还 向 你 演示 了 如 何 轻松 改变 菜 个 样式 。 点 击 putton 后 ， 其 中 一 个 样式 的 选择 器 会 从 
#block14é W#block2, 产生 的 效果 是 改变 了 此 样式 所 应 用 的 p 元 素 。 就 像 其 他 对 DOM 的 改动 一 样 ， 
浏览 器 会 立即 反映 出 新 选择 右 并 更 新 样式 应 用 的 方式 ， 如 图 29-5 所 示 。 
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图 29-5 ”改变 样式 的 选择 器 
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29.2 ”使 用 元 素 样式 


要 获取 某 个 元 素 的 style 属 性 所 定义 的 样式 属性 ， 需 要 读 取 HTMLElement 对 象 里 定义 的 style 
R VE (EL ( 要 了 人 解 HTMLElement 对象 的 更 多 信息 ， 请 参见 第 28 章 )。style 属 性 会 返回 一 个 
CSSStyleDeclaration 对 象 , 它 和 你 通过 样式 表 所 获取 的 对 象 属于 同一 类 型 。 我 会 在 下 一 节 详 细 介 CN 
绍 这 个 对 象 。 为 演示 HTMLElement.style 属 性 ， 我 在 代码 清单 29-$ 中 用 CSSStyleDeclaration. 
cssText 属 性 来 显示 和 修改 应 用 到 某 个 元 素 上 的 style 属 性 。 


代码 清单 29-5 ”从 一 个 HTMLElement 上 获取 CS$sstyleDeclaration 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«/head» 
«body» 
«p id="block1" 
style-"color:white; border: thick solid black; background-color: gray"» 
There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 
</p> 
<div><button id="pressme">Press Me </button></div> 
<div id="placeholder"></div> 
<script> 
var placeholder = document.getElementById("placeholder"); 
var targetElem = document.getElementById("block1") ; 
displayStyle(); 














T 


























document.getElementById("pressme").onclick = function() { 
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targetElem.style.cssText = "color:black"; 
displayStyle(); 


function displayStyle() { 
f (placeholder.hasChildNodes()) { 
placeholder. removeChild(placeholder. firstChild) ; 
} 


var newElem = document.createElement("table"); 


addRow(newElem, "Element CSS", targetElem.style.cssText) ; 
placeholder.appendChild(newElem); 
} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 


} 
</script> 
</body> 
</html> 


这 段 脚 本 会 显示 某 个 元 素 的 style 属 性 值 ， 并 且 button 被 点 击 后 还 会 修改 这 个 值 以 应 用 另 一 
种 样式 。 从 图 29-6 可 以 看 到 它 的 效果 。 
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图 29-6” 读 取 和 修改 应 用 到 某 个 元 素 上 的 样式 
我 在 这 张 图 里 用 的 是 Firefox 浏 览 器 ， 因 为 它 会 显示 出 cssText 值 里 的 简写 属性 名 。 








T 
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提示 在 关于 样式 表 的 那 一 节 ， 我 说 过 尝试 解析 cssText 属 性 的 值 不 是 一 个 好 主意 。 这 名 话 同样 


适用 于 处 理 单个 元 素 。 请 参见 29.3 节 ， 里面 介 绍 了 一 种 更 为 健壮 的 方式 来 深入 探索 CSS 属 
性 值 的 细节 。 
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29.3 ”使 用 CSSStyleDeclaration 对 象 


你 处 理 的 是 样式 表 还 是 某 个 元 素 的 style 
用 CssStyleDeclaration 对 象 。 表 29-7 介 绍 了 这 个 重要 对 象 的 成 员 。 











衣 性 并 不 重要 。 要 通过 DOM 完 全 控制 CSS UE 








表 29-7 CssstyleDeclaration 对 象 的 成 员 















































成 BR 说 明 ik E 
cssText 获取 或 设置 样式 的 文本 字符 串 
getPropertyCSSValue(«name») 获取 指定 的 属性 CSSPrimitiveValue 
getPropertyPriority(«name») 获取 指定 属性 的 优先 级 字符 串 
getPropertyValue(<name>) 获取 字符 串 形式 的 指定 值 字符 串 
item(<pos>) 获取 指定 位 置 的 项 目 字符 串 
length 获取 项 目的 数量 数值 
parentRule 如 果 存 在 样式 规则 就 获取 它 CSSStyleRule 
removeProperty(«name») 移 除 指定 的 属性 字符 串 
setProperty(<name>, <value>, <priority>) 设置 指定 属性 的 值 和 优先 级 void Ca 
«style» 获取 或 设置 指定 CSS 属 性 的 便捷 属性 字符 串 




















除了 itenm 方 法 ， 大 多 数 浏览 器 还 支持 数组 风格 的 表示 法 ， 因 此 item(4) 和 item[4] 是 等 价 的 。 


29.3.1 使 用 便捷 属性 








操作 CSSStyleDeclaration 对 象 最 简单 的 方式 是 使 用 便 损 


LE 


生 。 可 以 通过 读 取 对 象 属性 来 确定 对 应 CSS 
的 值 。 





























E 属 性 ， 它 们 分 别 对 应 于 各 个 CSS 属 
属性 的 当前 值 ,并 通过 给 对 象 属性 指派 新 值 来 改变 CSS 





提示 “我 在 这 一 节 里 读 取 和 修改 的 值 属 于 设置 值 (configured value )。 实 际 读 取 和 修改 的 是 定义 
在 HIML 文 档 中 的 值 ， 它 们 或 者 位 于 样式 表 中 ， 或 者 直接 被 应 用 到 元 素 上 。 当 浏览 器 准 
备 显 示 某 个 元 素 时 ， 它 会 生成 一 组 计算 值 (computed value )， 通 过 使 用 第 4 章 介 绍 的 模型 
来 处 理 浏览 器 样式 、 样 式 表 和 style 属 性 的 层 登 和 继承 。 关 于 如 何 获取 某 个 元 素 CSS 计 算 
值 的 详情 ， 请 参见 29.4 节 。 





代码 清单 29-6 对 此 提供 了 演示 。 


代码 清单 29-6 ”使 用 cssstyleDeclaration 对 象 的 便捷 属性 


<!DOCTYPE HTML> 
<html> 
<head> 
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<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/» 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style title-"core styles"» 
#block1 ( color: white; border: thick solid black; background-color: gray;) 
pt 
border: medium double black; 
background-color: lightgray; 
} 
table {border: thin solid black; border-collapse: collapse; 
margin: 5px; float: left; } 
td {padding: 2px;} 
</style> 
</head> 
<body> 
<p id="block1">There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 
</p> 
<p id="block2" style="border: medium dashed blue; color: red; padding: 2px"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 
</p> 
<div><button id="pressme">Press Me </button></div> 
<div id="placeholder"></div> 
<script> 
var placeholder = document. getElementById("placeholder") ; 
displayStyles(); 





document.getElementById("pressme").onclick = function() { 
document .styleSheets[0].cssRules.item(1).style.paddingTop = "10px"; 
document .styleSheets[0].cssRules.item(1).style.paddingRight = "12px"; 
document. styleSheets[0].cssRules.item(1).style.paddingLeft = "Spx"; 
document. styleSheets[0].cssRules.item(1).style.paddingBottom = "5px"; 
displayStyles(); 

} 


function displayStyles() { 
if (placeholder.hasChildNodes()) { 
var childCount = placeholder.childNodes. length; 
for (var i = 0; i < childCount; i++) { 
placeholder.removeChild(placeholder.firstChild); 
} 
] 
displayStyleProperties(document.styleSheets[0].cssRules.item(1).style); 
displayStyleProperties (document.getElementById("block2").style); 
} 


function displayStyleProperties(style) { 
var newElem = document.createElement ("table"); 
newElem.setAttribute("border", "1"); 
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addRow(newElem, "border", style.border) ; 
addRow(newElem, "color", style.color); 
addRow(newElem, "padding", style.padding); 
addRow(newElem, "paddingTop", style.paddingTop); 


placeholder.appendChild(newElem); 
} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 


} 
</script> 
</body> 
</html> 


代码 清单 29-6 中 的 脚本 显示 了 4 个 CSsstyleDeclaration 便 捷 属性 的 值 。 它 们 分 别 读 取 自从 样 
式 表 获得 的 对 象 和 元 素 的 style 属 性 ， 以 此 演示 获得 这 些 对 象 的 两 种 方式 。 从 图 29-7 可 以 看 到 这 
些 值 是 如 何 显示 的 。 
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There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the 
countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. 
































图 29-7 从 样式 便捷 属性 中 读 取 值 


便捷 属性 border 、color 和 padding 各 自 对 应 于 同名 CSS 属 性 。 便 捷 属 性 paddingTop 对 应 于 
CSS 的 padding-top 属 性 。 这 就 是 多 单词 CSS 属 性 的 一 般 命 名 模式 : 去 掉 连 字符 ， 然 后 大 写 第 二 
个 及 之 后 单词 的 首 字母 。 如 你 所 见 , 简写 的 CSS 属 性 和 单独 属性 都 有 着 对 应 的 便捷 属性 C 比如 ， 
padding 和 paddingTop )。 如 果 你 没有 给 CSS 属 性 设置 值 ， 那 么 对 应 的 便捷 属性 就 会 返回 一 个 空 
白字 符 串 ("" )。 

当 按 钮 被 按 下 后 , 脚本 会 修改 各 个 单独 的 内 边 距 属 性 值 , 具体 做 法 是 使 用 来 自 文档 第 一 个 样 
式 表 的 CSSstyleDeclaration 对 象 上 的 便捷 属性 paddingTop 、paddingBottom 、paddingLeft 和 
paddingRight。 从 图 29-8 中 可 以 看 到 它 的 效果 。 这 些 值 的 变动 不 仅 立即 影响 了 文档 的 外 观 ， 而 且 
还 与 简写 和 单独 的 便捷 属性 进行 了 同步 ， 使 它们 反映 出 这 些 新 值 。 
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图 29-8 ”通过 CSSStyleDeclaration 对 象 改变 CSS 属 性 








29.3.2 ”使 用 常规 属性 




















如 果 你 明确 知道 需要 处 理 的 CSS 属 性 名 称 ， 而 且 存 在 相应 的 便捷 属性 ,那么 使 用 便捷 属性 是 














件 很 简单 的 事 。 如 果 需 要 以 程序 方式 探索 CSS 属 性 , 或 者 需要 获取 /设置 某 个 没有 对 应 便 撒 











E 属 性 的 


CSS 属 性 ， 那 么 CSSStyleDeclaration 对 象 的 其 他 成 员 可 能 会 派 上 用 场 。 代 码 清 单 29-7 展 示 了 其 中 





一 些 属性 的 用 途 。 
代码 清单 29-7 使 用 CssstyleDeclaration 对 象 的 常规 属性 


<!DOCTYPE HTML> 
<html> 
<head> 

<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style title-"core styles"» 


pt 





color: white; 

border: medium double black; 
background-color: gray; 
padding-top: 5px; 





} 
table {border: thin solid black; border-collapse: collapse; 


margin: 5px; float: left; } 
td {padding: 2px;} 
</style> 
</head> 


<body> 
<p id="block1">There are lots of different kinds of fruit - there are over 


500 varieties of banana alone. By the time we add the countless types of 


apples, oranges, and other well-known fruit, we are faced with thousands of 


choices. 
</p> 
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<div><button id="pressme">Press Me </button></div> 

<div id="placeholder"></div> 

<script> 
var placeholder = document.getElementById("placeholder"); 
displayStyles(); 


document.getElementById("pressme").onclick = function() { 
var styleDeclr = document.styleSheets[0].cssRules[0].style; 
styleDeclr.setProperty("background-color", "lightgray"); 
styleDeclr.setProperty("padding-top", "20px"); 
styleDeclr.setProperty("color", "black"); 
displayStyles(); 

} 


function displayStyles() { 
if (placeholder.hasChildNodes()) { 
var childCount = placeholder.childNodes. length; 
for (var i = 0; i < childCount; i++) { 
placeholder.removeChild(placeholder.firstChild); 
i 
} 


var newElem = document.createElement("table"); 
newElem.setAttribute("border", "1"); 





var style = document.styleSheets[0].cssRules[0].style; 


addRow(newElem, "border", style.getPropertyValue("border")); 
addRow(newElem, "color", style.getPropertyValue("color")); 
addRow(newElem, "padding-top", style.getPropertyValue("padding-top")); 
addRow(newElem, "background-color", 
style.getPropertyValue("background-color")); 


placeholder.appendChild(newElem); 
} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 


} 
</script> 
</body> 
</html> 


这 个 例子 只 从 一 个 来 源 读 取样 式 属 性 : 样式 表 。 使 用 getPropertyValue 方 法 来 获得 某 个 CSS 
属性 的 值 , 并 用 setpProperty 方 法 定义 新 值 。 请 注意 你 在 这 些 方法 中 要 使 用 真正 的 CSS 属 性 名 ， 而 
非 便捷 属性 的 名 称 。 

1. 以 程序 方式 探索 属性 

到 目前 为 止 , 我 在 示例 里 都 显 式 指定 了 想 要 操作 的 CSS 属 性 名 称 。 如 果 我 想 在 事先 不 知情 的 
情况 下 获取 已 应 用 哪些 属性 的 信息 , 就 必须 通过 CSsstyleDeclaration 的 成 员 进 行 探 索 ,， 如 代码 清 
单 29-8 所 示 。 
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代码 清单 29-8 ”以 程序 方式 探索 CSS 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
«meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style title-"core styles"> 
pt 
color: white; 
background-color: gray; 
padding: 5px; 





} 
table {border: thin solid black; border-collapse: collapse; 


margin: 5px; float: left; } 
td {padding: 2px;} 
</style> 
</head> 
<body> 
<p id="block1">There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 


choices. 

</p> 

<div id="placeholder"></div> 

<script> 
var placeholder = document.getElementById("placeholder"); 
displayStyles(); 


function displayStyles() { 
var newElem = document.createElement ("table"); 
newElem.setAttribute("border", "1"); 


var style = document.styleSheets[0].cssRules[0].style; 
for (var i = 0; i < style.length; i++) { 

addRow(newElem, style[i], style.getPropertyValue(style[i])); 
) 


placeholder.appendChild(newElem); 
} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 
} 
</script> 
</body> 
</html> 


这 个 例子 中 的 脚本 枚 举 了 样式 表 第 一 条 样式 的 所 有 属性 。 可 以 从 图 29-9 看 到 结 
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There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the 
time we add the countless types of apples, oranges, and other well-known fruit, we are faced 
with thousands of choices. 
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óm 


2. 获知 样式 属性 的 重要 性 

正如 我 在 第 4 章 解释 过 的 那样 ， 可 以 应 用 !important 到 某 条 属性 声明 上 ， 让 浏览 器 优先 使 用 
这 个 值 显示 元 素 。 操 作 CSSStyleDeclaration 对 象 时 可 以 使 用 getPropertyPriority 方 法 来 查 
看 !important 是 否 已 被 应 用 到 某 个 属性 上 ， 如 代码 清单 29-9 所 示 。 


代码 清单 29-9 ”获知 某 个 属性 的 重要 性 


<!DOCTYPE HTML> 
<html> 
<head> 

<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style title-"core styles"> 


pt 

















color: white; 
background-color: gray limportant; 
padding: 5px !important; 


table (border: thin solid black; border-collapse: collapse; 
margin: 5px; float: left;] 
td (padding: 2px;] 
</style> 
</head> 
<body> 
«p id-"blocki"»There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 


choices. 

</p> 

<div id="placeholder"></div> 

<script> 
var placeholder = document.getElementById("placeholder"); 
displayStyles(); 


function displayStyles() { 
var newElem = document.createElement("table"); 
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newElem.setAttribute("border", "1"); 
var style = document.styleSheets[0].cssRules[0].style; 


for (var i = 0; i « style.length; i++) { 
addRow(newElem, style[i], style.getPropertyPriority(style[i])); 


placeholder .appendChild(newElem) ; 
} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 
} 
</script> 
</body> 
</html> 


getpPropertyPriority 方 法 对 高 优先 级 的 值 会 返回 important ， 如 果 没 有 指定 重要 性 则 会 返回 
一 个 空白 字符 串 ("" )。 

















提示 可 以 使 用 setProperty 方 法 来 指定 某 个 值 是 否 重要 。 我 在 本 章 前 面 演 示 setProperty 方 法 时 
省 略 了 这 个 重要 性 参数 ， 但 如 果 你 想 给 某 个 值 应 用 1important， 可 以 将 important 作 为 第 
三 个 参数 指定 给 setProperty 方 法 。 


29.3.3 ”使 用 细 粒 度 的 CSS DOM 对 象 


枚 举 某 个 样式 里 的 属性 和 使 用 getPropertyValue 方 法 ， 可 以 找 出 哪些 属性 已 被 使 用 。 但 是 ， 
你 仍然 需要 进一步 了 解 各 个 属性 才能 使 用 它们 。 举 个 例子 ， 你 得 知道 width 属性 的 值 是 用 长 度 表 
达 的 ， 而 animation-delay 属 性 的 值 是 用 时 间 跨 度 表达 的 。 

某 些 情形 下 你 不 想 预 先知 道 这 个 ， 可 以 使 用 cssstyleDeclaration.getPropertyCSSValue 方 法 
来 获取 CSSPrimitiveValue 对 象 ， 这 些 对 象 代 表 了 样式 里 各 个 属性 所 定义 的 值 。 表 29-8 介 绍 了 
CSSPrimitiveValue 对 象 的 成 员 。 
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表 29-8 CSsSPrimitiveValue 对 象 的 成 员 



































成 R 说 明 返 回 
cssText 获得 一 个 用 文本 表示 的 值 字符 串 
getFloatValue(<type>) 获得 一 个 数值 数值 
getRGBColorValue() 获得 一 个 颜色 值 RGBColor 
getStringValue() 获得 一 个 字符 串 值 字符 串 
primitiveType 获得 值 的 单位 类 型 数值 
setFloatValue(<type>, <value>) 设置 一 个 数值 void 
setStringValue(<type>, <value>) 设置 一 个 基于 字符 串 的 值 void 
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CSSPrimitiveValue 对 象 的 关键 在 于 primitiveType 属 性 , 它 会 告诉 你 属性 的 值 是 用 什么 单位 表 
达 的 。 表 29-9 展 示 了 已 定义 的 单位 类 型 集合 。 它 们 对 应 于 我 在 第 4 章 介绍 过 的 CSS 单 位 。 


































































































表 29-9 CssprimitiveValue 对 象 的 成 员 
基本 单位 类 型 说 BA 
CSS NUMBER 比 单位 是 用 数字 表达 的 
CSS_PERCENTAGE 比 单位 是 用 百分比 表达 的 
CSS EMS 比 单位 是 以 em 表达 的 
CSS PX 比 单位 是 以 CSS 像 素 表达 的 
CSS Q 比 单位 是 以 厘米 表达 的 
CSS I 比 单位 是 以 英寸 表达 的 
CSS PT 比 单位 是 以 点 (point ) 表达 的 
CSS PC 比 单位 是 以 十 二 点 活字 表达 的 
CSS DEG 比 单位 是 以 度 表 达 的 
CSS RAD 比 单位 是 以 弧度 表达 的 
CSS GRAD 比 单位 是 以 梯度 〈 gradian ) 表达 的 
CSS MS 比 单位 是 以 毫秒 表达 的 
CSS S 比 单位 是 以 秒表 达 的 
CSS STRING 比 单位 是 用 字符 串 表 达 的 
CSS_RGBCOLOR 比 单位 是 用 颜色 表达 的 





























| 


代码 清单 29-10 向 你 展示 了 如 何 使 用 这 个 对 象 来 判断 某 个 CSS 属 性 值 的 单位 数量 和 单位 类 型 。 


代码 清单 29-10 ”使 用 CSSPrimitiveValue 对 象 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name-"description" content-"A simple example"/> 
«link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /» 
«style title-"core styles"> 
pt 
color: white; 
background-color: gray limportant; 
padding: 7px !important; 





table (border: thin solid black; border-collapse: collapse; 
margin: 5px; float: left;] 
td (padding: 2px;] 
</style> 
</head> 
<body> 
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<p id="block1">There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 


choices. 

</p> 

<div id="placeholder"></div> 

<script> 
var placeholder = document.getElementById("placeholder"); 
displayStyles(); 


function displayStyles() { 
var newElem = document.createElement("table"); 
newElem.setAttribute("border", "1"); 


var style = document.styleSheets[0].cssRules[0].style; 


for (var i = 0; i « style.length; i++) { 
var val = style.getPropertyCSSValue(style[i]); 


if (val.primitiveType == CSSPrimitiveValue.CSS PX) { 
addRow(newElem, style[i], 
val.getFloatValue(CSSPrimitiveValue.CSS PX), "pixels"); 
addRow(newElem, style[i], 
val.getFloatValue(CSSPrimitiveValue.CSS PT), "points"); 
addRow(newElem, style[i], 
val.getFloatValue(CSSPrimitiveValue.CSS IN), "inches"); 
} else if (val.primitiveType == CSSPrimitiveValue.CSS RGBCOLOR) { 
var color - val.getRGBColorValue(); 
addRow(newElem, style[i], color.red.cssText + 
+ color.green.cssText + " " 
* color.blue.cssText, "(color)"); 


"on 


) else ( 
addRow(newElem, style[i], val.cssText, "(other)"); 
} 


} 
placeholder .appendChild(newElem) ; 


} 


function addRow(elem, header, value, units) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td><td>" + units + "</td></tr>"; 


} 


</script> 
</body> 
</html> 


CSSPrimitiveValue 对 象 最 有 用 的 功能 之 一 是 能 将 一 种 单位 转换 成 男 一 种 。 在 代码 清单 29-10 
中 ,脚本 辨认 出 值 是 以 像素 表达 的 , 并 请 求 以 点 和 英寸 的 表达 形式 返回 相同 的 值 。 这 就 意味 着 你 
在 处 理 值 时 可 以 选择 合适 的 单位 ， 而 不 是 它们 最 初 所 表达 的 单位 。 

请 注意 颜色 值 是 通过 GetRGBColorValue 方 法 获得 的 ， 此 方法 会 返回 一 个 RGBColor 对 象 。 这 个 
对 象 有 三 个 属性 (A, RAE), 它们 分 别 返 回 各 自 的 CSSPrimitiveValue 对 象 。 从 图 29-10 可 以 看 
到 浏览 器 是 如 何 处 理 单位 类 型 的 。 
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exo. 





There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the 
IIl countless types of apples. oranges. and other well-known fruit, we are faced with thousands of choices. 
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29.4 ”使 用 计算 样式 


这 一 章 到 目前 为 止 的 例子 都 把 焦点 放 在 了 样式 表 或 style 属 性 中 指定 的 CSS 属 性 值 上 。 这 对 确 
定 文档 里 直接 包含 了 什么 很 有 用， 但 正如 我 在 第 4 章 解 释 的 那样 ， 浏 览 器 会 从 多 个 来 源 汇聚 样式 
以 计算 出 该 用 哪个 值 来 显示 某 一 元 素 。 这 里 包括 了 你 没有 为 其 显 式 指定 值 的 那些 属性 , 没有 指定 
的 原因 或 是 值 是 继承 的 ， 或 是 某 种 浏览 器 样式 惯例 。 Cam 
浏览 器 用 于 显示 某 个 元 素 的 CSS 属 性 值 集合 被 称 为 计算 样式 。 你 可 以 通过 document. 
defaultView.getComputedStyle 方 法 获取 包含 某 一 元 素 计算 样式 的 CSSStyleDeclaration 对 象 。 用 
这 个 方法 获得 的 对 象 包含 了 浏览 器 用 来 显示 元 素 的 所 有 属性 细节 ， 以 及 各 个 属性 的 值 。 






































提示 “无 法 通过 以 getComputedStyle 方 法 获得 的 CSSStyleDeclaration 对 象 修改 计算 样式 。 要 做 到 
这 一 点 ， 必 须 修 改 样式 表 ， 或 者 通过 元 素 的 style 属 性 直接 给 它 应 用 样式 属性 ， 就 像 本 章 
之 前 所 展示 的 那样 。 


代码 清单 29-11 展 示 了 如 何 使 用 一 些 计算 样式 的 值 。 
代码 清单 29-11 使 用 某 个 元 素 的 计算 样式 


«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<meta name="author" content="Adam Freeman"/> 
<meta name="description" content="A simple example"/> 
<link rel-"shortcut icon" href-"favicon.ico" type-"image/x-icon" /> 
«style title-"core styles"» 
p { 
padding: 7px !important; 


table {border: thin solid black; border-collapse: collapse; 
margin: 5px; float: left; } 
td {padding: 2px;} 
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</style> 
</head> 
<body> 
<p id="block1">There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 


choices. 

</p> 

<div id="placeholder"></div> 

<script> 
var placeholder = document.getElementById("placeholder"); 
displayStyles(); 


function displayStyles() { 
var newElem = document.createElement ("table"); 
newElem.setAttribute("border", "1"); 


var targetElem = document.getElementById("block1") ; 

var style = document.defaultView. getComputedStyle(targetElem) ; 
addRow(newElem, "Property Count", style.length); 

addRow(newElem, "margin-top", style.getPropertyValue("margin-top")); 
addRow(newElem, "font-size", style.getPropertyValue("font-size")); 
addRow(newElem, "font-family", style.getPropertyValue("font-family")); 


placeholder.appendChild(newElem); 
} 


function addRow(elem, header, value) { 
elem.innerHTML += "<tr><td>" + header + ":</td><td>" 
+ value + "</td></tr>"; 


} 
</script> 
</body> 
</html> 


在 这 个 例子 中 ， 我 展示 了 一 些 未 曾 显 式 定义 过 的 属性 值 。 从 图 29-11 可 以 看 到 它 的 效果 。 你 
还 可 以 看 出 我 为 什么 只 显示 了 少数 几 个 属性 。 表 格 的 第 一 行 报告 了 计算 样式 含有 多 少 属性 。 这 个 
数字 根据 浏览 器 的 不 同 会 有 所 增 减 ， 不 过 Chrome 浏 览 器 报告 的 223 是 个 典型 的 数量 。 
f Leks 
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There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the 
time we add the countless types of apples. oranges, and other well-known fruit. we are faced — | 
| with thousands of choices. | 


| 
| | 
| |Property Count|223 | 
|margin-top: |16px 
[font-size: —— |16px 
|font-family: [Times New Roman' 
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29.5 小结 


本 章 向 你 展示 了 使 用 DOM 操 作 HTML 文 档 内 CSS 属 性 和 值 的 各 种 方法 。 可 以 使 用 样式 表 或 者 
各 个 元 素 的 style 属 性 ， 也 可 以 利用 多 种 多 样 的 对 象 来 深入 样式 的 细节 。 不 仅 可 以 使 用 显 式 定义 
过 的 属性 和 值 , 还 可 以 使 用 浏览 器 用 于 显示 元 素 的 计算 样式 , 这 让 你 能 够 比较 定义 的 样式 和 实际 
使 用 的 样式 。 


























使 用 事件 








我 在 本 书 这 一 部 分 的 例子 中 已 经 多 次 使 用 事件 来 响应 按钮 点 击 。 现 在 是 时 候 在 这 一 章 深 入 细 
， 解 释 事 件 到 底 是 什么 ， 向 你 展示 它们 如 何 工 作 以 及 如 何 融入 DOM 的 其 余部 分 了 。 简 单 地 说 ， 
件 可 用 来 定义 一 些 JavaScript 函 数 , 使 它们 响应 某 个 元 素 状 态 的 改变 , 比如 元 素 获 得 或 失去 键盘 
焦点 ， 或 者 用 户 在 元 素 上 方 点 击 了 鼠标 按钮 。 
本 章 重 点 介绍 事件 的 机 制 以 及 document 和 HTMLElement 对 象 所 定义 的 事件 。 这 些 事 件 是 最 为 常 
用 的 ， 而 且 对 所 有 的 文档 和 元 素 都 适用 。 表 30-1 提 供 了 本 章 内 容 概要 。 


























4 二 




















表 30-1 本章 内 容 概要 




























































































































































































































































































| 题 解决 方案 代码 清单 
内 联 处 理事 件 在 元 素 上 使 用 某 个 以 on 开头 的 属性 30-1, 30-2 
用 函数 处 理事 件 定义 函数 ， 并 用 它 的 名 称 作为 以 on 开头 的 属性 里 的 值 30-3 
DOM 处 理事 件 使 用 标准 的 DOM 搜 索 技 巧 , 并 用 以 on 开头 的 属性 指派 一 个 函数 , 或 者 用 代表 30-4, 30-5 
该 元 素 的 HTMLElement 对 象 上 的 addEventListener 方 法 
区 分 事件 类 型 使 用 Event.type 属 性 30-6 
在 事件 到 达 后 代 元 素 HUS 
之 前 对 其 进行 处 理 ASE 2 
停止 某 一 事件 的 传播 使 用 Event 对 象 上 的 stopPropagation 或 stopImmediatepPropagation 方 法 30-8 
在 事件 到 达 后 代 元 素 LL ae pers 
之 后 对 其 进行 处 理 。。 EAE 30-9 
撤销 关联 到 事件 上 的 ， " 
默认 操作 使 用 Event 对 象 上 的 preventDefault 方 法 30-10 
自 应 鼠标 操作 处 理 鼠 标 事 件 30-11 
自 应 元 素 获 得 和 失去 2x MS 
Tm 使 用 键盘 焦点 事件 30-12 
自 应 键盘 按键 使 用 键盘 事件 30-13 
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30.1 ”使 用 简单 事件 处 理 器 


可 以 用 几 种 不 同 的 方式 来 处 理事 件 。 最 直接 的 方式 是 用 事件 属性 创建 一 个 简单 事件 处 理 器 
( simple event handler )。 元 素 为 它们 支持 的 每 一 种 事件 都 定义 了 一 个 事件 属性 。 举 个 例子 ， 
onmouseover 事 件 属性 对 应 于 全 局 事件 mouseover， 后 者 会 在 用 户 把 光标 移动 到 元 素 占 据 的 浏览 
屏幕 区 域 上 方 时 触发 。( 这 是 一 种 通用 的 模式 : 大 多 数 事件 都 有 一 个 对 应 的 事件 属性 ， 其 名 称 定 


义 为 on<eventname> )。 


30.1.1 实现 简单 的 内 联 事件 处 理 器 


使 用 某 个 事件 属性 最 直接 的 方式 是 给 它 指派 一 组 JavaScript 语 句 。 当 该 事件 被 触发 后 , 浏览 器 
就 会 执行 你 提供 的 语句 。 代 码 清单 30-1 提 供 了 一 个 简单 的 例子 。 


代码 清单 30-1 用 内 联 JavaScript 处 理事 件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 







































































background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 
} 
</style> 
</head> 
<body> 
«p onmouseover-"this.style.background-'white'; this.style.color-'black'"» 
There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 
</p> 
</body> 
</html> 


在 这 个 例子 中 ， 我 指定 两 条 JavaScript 语 句 用 来 响应 mouseover 事 件 。 具 体 的 方式 是 设置 它们 
作为 文档 里 p 元 素 onmouseover 事 件 属 性 的 值 。 这 些 语句 如 下 : 


this.style.background-'white'; 
this.style.color-'black' 


正如 我 在 第 4 章 解 释 的 ， 这 些 是 直接 应 用 到 元 素 style 属 性 上 的 CSS 属 性 。 浏 览 器 会 把 特殊 变 
量 this 的 值 设 置 为 代表 触发 事件 元 素 的 HTMLElement 对象 ， 而 style 属 性 会 返回 该 元 素 的 
CSSSstyleDeclaration 对 象 。 
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提示 请 注意 我 用 双 引 号 来 界定 整个 属性 值 ， 而 用 单 引 号 来 指定 我 想 要 的 颜色 ( 以 JavaScript 字 
符 串 的 形式 )。 如 果 你 愿意 的 话 ， 可 以 更 改 它们 的 次 序 ， 但 是 在 属性 中 误 入 引用 值 用 的 正 
是 这 种 技巧 。 


如 果 你 在 浏览 器 中 载 入 这 个 文档 ，style 元 素 定义 的 初始 样式 就 会 被 应 用 到 p 元 素 上 。 当 你 把 
鼠标 移 至 元 素 上 方 时 , JavaScript 语 句 就 会 被 执行 ,用 我 在 第 4 章 介绍 的 技巧 改变 指派 给 background 
和 color 这 些 CSS 属 性 的 值 。 从 图 30-1 可 以 看 到 这 种 转变 。 
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There are lots of different kinds of fruit - there are over 500 varieties of 
banana alone. By the time we add the countless types of apples. oranges, and 
other well-known fruit, we are faced with thousands of choices. 

















图 30-1 ”处 理 Mouse0ver 事 件 














这 种 转变 是 单 向 的 ， 当 鼠标 离开 元 素 的 屏幕 区 域 时 样式 不 会 重 置 。 许 多 事件 是 成 双 成 对 的 。 
与 mouseover 相 对 的 事件 被 称 为 nouseout， 可 以 通过 onmouseout 事 件 属性 来 处 理 这 一 事件 ， 如 代码 
清单 30-2 所 示 。 
代码 清单 30-2 ”人 处理 Mouse0ut 事 件 


<!DOCTYPE HTML> 











<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
p { 
background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 
</style> 
</head> 
<body> 


<p onmouseover="this.style.background='white'; this.style.color='black'" 
onmouseout-"this.style.removeProperty('color'); 
this.style.removeProperty('background')"» 
There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 
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</p> 
</body> 
</html> 


添加 这 些 代码 后 ， 此 元 素 就 能 响应 鼠标 进入 和 离开 它 所 占据 的 屏幕 区 域 了 。 从 图 30-2 可 以 看 
出 新 的 转变 。 
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There are lots of different kinds of fruit - there are over 500 varieties of 
banana alone. By the time we add the countless types of apples, oranges, and 
other well-known fruit, we are faced with thousands of choices 























130-2 ”组 合成 对 事件 之 后 的 转变 效果 


代码 清单 30-2 展 示 了 内 联 事件 处 理 器 存在 的 两 个 问题 : 其 一 是 它们 太 繁 琐 ， 会 使 HTML 非 常 
难以 阅读 ; 其 二 是 这 些 JavaScript 语 句 只 应 用 在 一 个 元 素 上 。 我 必须 在 其 他 每 个 应 当 拥 有 相同 行为 
的 p 元 素 上 重复 添加 这 些 语句 。 


30.1.2 ”实现 一 个 简单 的 事件 处 理 函 数 


为 了 在 一 定 程度 上 解决 繁琐 和 重复 添加 问题 ， 以 定义 一 个 函数 ,并 将 函数 名 指定 为 元 
素 事件 属性 的 值 。 代 码 清单 30-3 展 示 了 如 何 做 到 这 一 点 。 


代码 清单 30-3 ”用 函数 来 处 理事 件 


<!DOCTYPE HTML» 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 
background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 




















</style> 
<script type="text/javascript"> 
function handleMouseOver(elem) { 
elem.style.background-'white'; 
elem.style.color-'black'; 


) 


function handleMouseOut(elem) ( 
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elem.style.removeProperty('color'); 


elem.style.removeProperty('background'); 


) 


«/script» 
«/head» 
«body» 


«p onmouseover-"handleMouseOver(this)" onmouseout="handleMouseOut (this) "> 
There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 


</p> 


<p onmouseover="handleMouseOver(this)" onmouseout="handleMouseOut (this) "> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 


</p> 
</body> 
</html> 








在 这 个 例子 中 , 我 定义 了 一 些 JavaScript 函 数 , 它们 所 包含 的 语句 是 我 想 要 用 来 响应 鼠标 事件 
的 。 我 还 在 onmouseover 和 onmouseout 属 性 里 指定 了 这 些 函 数 。 特 殊 值 this 指 的 是 触发 事件 的 元 素 。 
这 种 方式 相对 于 之 前 的 技巧 有 了 进步 。 重 复 添 加 工作 变 得 更 少 了 , 代码 也 更 容易 阅读 了 。 但 
点 , 我 需要 再 次 访问 我 们 的 老 朋 友 : DOM。 








是 , 我 希望 能 让 事件 与 HTML 元 素 互 相 分 离 , 要 做 到 这 一 


30.2 ”使 用 DOM 和 事件 对 象 


我 在 之 前 几 节 里 演示 的 简单 事件 处 理 咒 用 于 基本 任务 是 可 行 的 , 但 如 果 


的 处 理 〈 以 及 更 优雅 地 定义 事件 处 理 器 )， 就 需要 使 用 DOM 和 JavaScript 的 Event 对 象 了 。 代 码 清 



































你 想 要 进行 更 为 复杂 





单 30-4 展 示 了 如 何 使 用 Event 对 象 ， 以 及 如 何 用 DOM 来 将 某 个 函数 与 事件 关联 起 来 。 
代码 清单 30-4 ”使 用 DOM 构 建 事件 处 理 


<!DOCTYPE HTML> 
<html> 
<head> 


<title>Example</title> 
<style type="text/css"> 


pt 


} 
</style> 
</head> 
<body> 
<p> 


background: gray; 
color:white; 

padding: 10px; 

margin: 5px; 

border: thin solid black 


There are lots of different kinds of fruit - there are over 
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500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 

</p> 

<p> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 

</p> 

<script type="text/javascript"> 


var pElems = document.getElementsByTagName("p") ; 

for (var i = 0; i < pElems.length; i++) { 
pElems[i].onmouseover = handleMouseOver; 
pElems[i].onmouseout = handleMouseOut; 


} 


function handleMouseOver(e) { 
e.target.style.background-'white' ; 
e.target.style.color-'black'; 

) 


function handleMouseOut(e) ( 
e.target.style.removeProperty('color'); 
e.target.style.removeProperty('background'); 


</script> 
</body> 
</html> 


这 就 是 你 在 之 前 儿童 见 到 的 方式 。 这 有 段 脚本 ( 必须 把 它 移 到 页 尾 ， 因 为 操作 的 是 DOM ) 找到 
我 想 要 处 理事 件 的 所 有 元 素 ， 然 后 给 事件 处 理 絮 属性 设置 一 个 函数 名 。 所 有 事件 都 拥有 像 这 样 的 
属性 。 它 们 的 命名 方式 是 一 致 的 : 以 on 开头 ， 后 接 事 件 的 名 称 。30.3 节 会 进一步 介绍 可 用 的 事件 。 















































提示 “请 注意 我 使 用 函数 的 名 称 来 将 它 注册 成 一 个 事件 监听 器 。 一 个 常见 的 错误 是 把 括号 加 在 
函数 名 的 后 面 ， 使 handleMouse0veT 变 成 handleMouse0ver()。 这 样 做 的 后 果 是 你 的 函数 会 
在 脚本 执行 时 ( 而 不 是 事件 触发 时 ) 被 调用 。 


代码 清单 中 那些 处 理事 件 的 函数 定义 了 一 个 名 为 e 的 参数 。 它 会 被 设 成 浏览 器 所 创建 的 一 个 
Event 对 象 ， 用 于 在 事件 触发 时 代表 该 事件 。 这 个 Event 对 象 向 你 提供 了 所 发 生 的 事件 信息 ， 让 你 
能 够 更 加 灵活 地 ( 相对 于 把 代码 放 在 元 素 属 性 中 而 言 ) 对 用 户 交 互 行 为 作出 反应 。 在 这 个 例子 中 ， 
我 用 target 属 性 来 获取 触发 事件 的 HTMLElement ， 这 样 我 就 能 使 用 样式 属性 来 改变 它 的 外 观 。 

在 向 你 展示 事件 对 象 之 前 , 我 想 先 演示 另 一 种 指定 事件 处 理 函 数 的 方式 。 事 件 属 性 ( 名 称 以 
on 开头 的 那些 ) 一 般 来 说 是 最 容易 的 方式 ， 但 你 也 可 以 使 用 addEventListener 方 法 ， 它 由 
HTMLElement 对 象 实现 。 你 还 可 以 使 用 removeEventListener 方 法 来 取消 函数 与 事件 之 间 的 关联 。 
你 在 这 两 个 方法 中 都 能 把 事件 类 型 和 处 理 它们 的 函数 表达 为 参数 ， 如 代码 清单 30-5 所 示 。 
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代码 清单 30-5 使 用 addEventListener 和 removeEventListener 方 法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 
background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 





} 

</style> 

</head> 
<body> 

<p> 
There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 

</p> 

<p id="block2"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 

</p> 

<button id="pressme">Press Me</button> 

<script type="text/javascript"> 
var pElems = document.getElementsByTagName("p") ; 
for (var i = 0; i < pElems.length; i++) { 

pElems[i].addEventListener("mouseover", handleMouseOver) ; 
pElems[i].addEventListener("mouseout", handleMouseOut); 


} 


document.getElementById("pressme").onclick = function() { 
document .getElementById("block2").removeEventListener("mouseout", 
handleMouseOut) ; 
} 


function handleMouseOver(e) { 
e.target.style.background-'white'; 
e.target.style.color-'black'; 

} 


function handleMouseOut(e) { 
e.target.style.removeProperty('color'); 
e.target.style.removeProperty('background'); 
j 
«/script» 
«/body» 
«/html» 
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这 个 例子 中 的 脚本 使 用 addEventListener 方 法 把 handleMouseOver 和 handleMouse0ut 也 数 注 册 
成 p 元 素 的 事件 处 理 器 。 当 button 被 点 击 后 , 脚本 用 removeEventListener 方 法 取消 了 id 值 为 block2 
的 p 元 素 与 handleMouse0ut 函 数 之 间 的 关联 。 请 注意 我 用 了 onclick 属 性 来 设置 按钮 元 素 的 click 事 
件 处 理 器 ， 以 此 演示 你 可 以 在 同一 个 脚本 里 自由 搭配 各 种 技巧 。 

addEventListener 方 法 的 优点 在 于 它 让 你 能 够 访问 某 些 高 级 事件 特性 ， 我 不 久 就 会 谈 到 。 
表 30-2 介 绍 了 Event 对 象 的 成 员 。 














#230-2 Event 对 象 的 函数 和 属性 







































































































































































名 FW 说 — HB ix E 
type 事件 的 名 称 ( 如 mouseover ) 字符 串 
target 事件 指向 的 元 素 HTMLElement 
currentTarget 带 有 当前 被 触发 事件 监听 器 的 元 素 HTMLEJement 
eventPhase 事件 生命 周期 的 阶段 数值 
bubbles 如 果 事 件 会 在 文档 里 冒 泡 则 返回 true， 否 则 返回 false 布尔 值 
cancelable 如 果 事 件 带 有 可 撤销 的 默认 行为 则 返回 true， 和 否则 返回 false 布尔 值 
timeStamp 事件 的 创建 时 间 ， 如 果 时 间 不 可 用 则 为 0 字符 串 
stopPropagation() 在 当前 元 素 的 事件 监听 器 被 触发 后 终止 事件 在 元 素 树 中 的 流动 void 
stopImmediatePropagation() ”立即 终止 事件 在 元 素 树 中 的 流动 。 当 前 元 素 上 未 被 触发 的 事件 监听 器 会 被 void 
忽略 

preventDefault() 防止 浏览 器 执行 与 事件 关联 的 默认 操作 void 
defaultPrevented 如 果 调 用 过 preventDefault() 则 返回 true 布尔 值 

















提示 Event 对象 定义 了 所 有 事件 都 常用 的 那些 功能 。 但 是 ， 当 我 在 本 章 后 面向 你 展示 基本 事件 
时 你 将 会 看 到 ， 还 有 其 他 一 些 与 事件 相关 的 对 象 定 义 了 额外 的 功能 ， 这 些 功 能 特别 针对 
某 些 特定 种 类 的 事件 。 


30.2.1 按 类 型 区 分 事件 


type 属 性 会 告诉 你 正在 处 理 的 是 哪 种 类 型 的 事件 。 这 个 值 以 字符 串 的 形式 提供 ， 比 如 
mouseover。 有 了 探测 事件 类 型 的 能 力 , 你 就 可 以 用 一 个 函数 来 处 理 多 个 类 型 了 ,如 代码 清单 30-6 
所 示 。 


代码 清单 30-6 使 用 type 属 性 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<style type="text/css"> 
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pt 
background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 
} 
</style> 
</head> 
<body> 
<p> 
There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 


apples, oranges, and other well-known fruit, we are faced with thousands of 
choices. 


</p> 

<p id="block2"> 
One of the most interesting aspects of fruit is the variety available in 
each country. I live near London, in an area which is known for 
its apples. 

</p> 

«script type="text/javascript"> 


var pElems = document.getElementsByTagName("p"); 

for (var i = 0; i « pElems.length; i++) { 
pElems[i].onmouseover = handleMouseEvent; 
pElems[i].onmouseout = handleMouseEvent; 


} 


function handleMouseEvent(e) { 
if (e.type == "mouseover") { 
e.target.style.background-'white'; 
e.target.style.color-'black'; 
) else ( 
e.target.style.removeProperty('color'); 
e.target.style.removeProperty('background'); 


} 
} 
</script> 
</body> 
</html> 


在 这 个 例子 的 脚本 中 ， 我 只 用 了 handleMouseEvent 这 一 个 事件 处 理 函 数 ， 通 过 使 用 type 属 性 
来 判断 我 正在 处 理 的 是 哪 一 种 事件 。 


























30.2.2 ”理解 事件 流 

















一 个 事件 的 生命 周期 包括 三 个 阶段 : 捕捉 (capture), A 4% (target) 和 冒 泡 (bubbling )。 在 
这 一 节 里 ,我 会 分 别 解释 这 些 阶 段 ， 向 你 展示 它们 是 如 何 工 作 的 ,以 及 如 何 使 用 事件 监听 函数 来 
控制 它们 。 
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1. 理解 捕捉 阶段 





当 某 个 事件 被 触发 时 ,浏览 器 会 找 出 事件 涉及 的 元 素 ， 它 被 称 为 该 事件 的 目标 。 浏 览 顺 会 找 
出 body 元 素 和 目标 之 间 的 所 有 元 素 并 分 别 检查 它们 , 看 看 它们 是 否 带 有 事件 处 理 咒 且 要 求 获得 其 
后 代 元 素 触 发 事件 的 通知 。 浏 览 器 会 先 触发 这 些 事件 处 理 咒 ， 然 后 才 会 轮 到 目标 自身 的 处 理 器 。 











代码 清单 30-7 对 此 进行 了 演示 。 
代码 清单 30-7 捕捉 事件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 
background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 





} 
span { 
background: white; 
color: black; 
padding: 2px; 
cursor: default; 
} 
</style> 
</head> 
<body> 
<p id-"blocki"» 




















There are lots of different kinds of fruit - there are over 
500 varieties of <span id="banana">banana</span> alone. By the time we add 
the countless types of apples, oranges, and other well-known fruit, we are 


faced with thousands of choices. 
</p> 
<script type="text/javascript"> 


var banana = document.getElementById("banana") ; 
var textblock = document.getElementById("block1"); 


banana.addEventListener("mouseover", handleMouseEvent) ; 
banana.addEventListener("mouseout", handleMouseEvent) ; 
textblock.addEventListener("mouseover", handleDescendantEvent, true); 
textblock.addEventListener("mouseout", handleDescendantEvent, true); 


function handleDescendantEvent(e) { 
if (e.type == "mouseover" 8& e.eventPhase == Event 
e.target.style.border = "thick solid red"; 
e.currentTarget.style.border = "thick double 
} else if (e.type == "mouseout" 8& e.eventPhase == 
e.target.style.removeProperty("border"); 


.CAPTURING PHASE) { 


black"; 
Event.CAPTURING PHASE) { 
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e.currentTarget.style.removeProperty("border"); 
) 
} 


function handleMouseEvent(e) { 
if (e.type == "mouseover") { 
e.target.style.background-'white'; 
e.target.style.color-'black'; 
} else { 
e.target.style.removeProperty('color'); 
e.target.style.removeProperty('background'); 


} 
} 
</script> 
</body> 
</html> 


在 这 个 例子 中 ， 我 定义 了 一 个 span 作 为 p 元 素 的 子 元 素 ， 然 后 注册 了 mouseover 和 mouseout 事 
件 的 处 理 器 。 请 注意 当 我 注册 父 元 素 ( 即 p 元 素 ) 时 ,我 给 addEventListener 方 法 添加 了 第 三 个 参 
数 ， 就 像 这 样 : 

textblock.addEventListener("mouseover", handleDescendantEvent, true); 

这 个 额外 的 参数 告诉 浏览 器 我 想 让 p 元 素 在 捕捉 阶段 接收 后 代 元 素 的 事件 。 当 mouseovez 事 件 
被 触发 时 , 浏览 器 会 从 HTML 文 档 的 根 节点 起 步 , 一 路 治 着 DOM 向 目标 ( 也 就 是 触发 事件 的 元 素 ) 
前 进 。 对 层级 里 的 每 一 个 元 素 ， 浏 览 器 都 会 检查 它 是 否 对 捕捉 到 的 事件 感 兴趣 。 可 以 从 图 30-3 看 
到 示例 文档 的 顺序 。 







































































图 30-3 ”捕捉 事件 流 


对 每 一 个 元 素 , 浏览 器 都 会 调用 它 所 有 启用 捕 提 的 监听 器 。 在 这 个 例子 中 , 浏览 器 会 找到 并 
调用 注册 在 p 元 素 上 的 handleDescendantEvent 困 数 。 当 handleDescendantEvent 函数 被 调用 时 , 
Event 对 象 包含 了 目标 元 素 的 信息 (通过 target 属 性 )， 还 有 导致 函数 被 调用 的 元 素 (通过 
currentTarget 属 性 )。 我 同时 使 用 了 这 两 个 属性 ， 这 样 就 能 修改 p 元 素 和 其 子 元 素 span 的 样式 了 。 
从 图 30-4 可 以 看 到 这 样 做 的 效果 。 
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There are lots of different kinds of fruit - there are over 500 varieties of banana 


alone. By the time we add the countless types of apples, oranges, and other well- 
known fruit, we are faced with thousands of choices. 














图 30-4 ”处理 事件 捕捉 


事件 捕捉 让 目标 元 素 的 各 个 上 级 元 素 都 有 机 会 在 事件 传递 到 目标 元 素 本 身 之 前 对 其 作出 反 
应 。 上 级 元 素 的 事件 处 理 器 可 以 阻止 事件 流向 目标 ， 方 法 是 对 Event 对 象 调用 stopPropagation 或 
stopImmediatePropagation 函 数 。 这 两 个 函数 的 区 别 在 于 ，stopPropagation 会 确保 调用 当前 元 素 
上 注册 的 所 有 事件 监听 器 ， 而 stopImmediatepPropagation 会 忽略 任何 未 触发 的 监听 器 。 代 码 清 
单 30-8 展 示 了 如 何 给 handleDescendantEvent 事 件 处 理 器 添加 stopPropagation 函 数 。 


代码 清单 30-8 阻止 事件 流 前 进 





function handleDescen 
if (e.type == "mo 
e.target.styl 
e.currentTarg 

} else if (e.type 
e.target.styl 
e.currentTarg 


} 
e.stopPropagation 
} 
做 了 这 个 改动 之 后 ， 


dantEvent(e) { 

useover" 8& e.eventPhase == Event.CAPTURING PHASE) { 
e.border = "thick solid red"; 

et.style.border = "thick double black"; 

== "mouseout" && e.eventPhase == Event.CAPTURING PHASE) { 
e.removeProperty("border"); 
et.style.removeProperty("border"); 


Q5 


浏览 器 的 捕捉 阶段 就 会 在 p 元 素 上 的 处 理 器 被 调用 时 结束 。 浏 览 咒 不 会 


再 检查 其 他 任何 元 素 ， 并 且 会 跳 过 目标 和 冒 泡 阶 段 ( 稍 后 就 会 介绍 )。 对 这 个 例子 来 说 ， 这 就 意 
味 着 handleMouseEvent 函 数 里 的 样式 变化 不 会 被 应 用 (以 啊 应 mouseover 事 件 )， 如 图 30-5 所 示 。 
请 注意 我 在 处 理 器 里 检查 了 事件 类 型 , 并 用 eventPhase 属 性 来 确定 事件 所 处 的 阶段 , 就 像 这 样 : 


if (e.type == "mouseo 








ver" && e.eventPhase == Event.CAPTURING PHASE) { 





在 注册 事件 监听 器 时 启用 捕捉 事件 并 不 能 停止 针对 元 素 自身 的 事件 。 在 这 个 例子 中 ，p 元 素 


占据 了 浏览 器 屏幕 空间 ， 
A TEAL SE BT BAYS 





它 同样 会 响应 mouseover 事 件 。 为 了 避免 这 一 点 ， 我 进行 了 检查 ， 确 保 
BCE ( 指针 对 后 代 元 素 的 事件 ,处 理 此 事件 完全 是 因为 我 注册 了 启用 捕捉 








的 监听 器 ) 时 才 会 应 用 样式 改动 。eventPhase 属 性 会 返回 表 30-3 里 展示 的 三 个 值 之 一 ， 它 们 代表 
了 事件 生命 周期 的 三 个 阶段 。 我 会 在 接 下 来 的 几 节 里 解释 其 他 两 个 阶段 。 
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There are lots of different kinds of fruit - there are over 500 varieties banana 


alone. By the time we add the countless types of apples, oranges, and other well- 
known fruit, we are faced with thousands of choices. 








图 30-5 ”停止 事件 的 传播 





表 30-3 ”Event.eventPhase 属 性 的 值 





名 称 说 明 
CAPTURING PHASE 此 事件 处 于 捕捉 阶段 
AT_TARGET 此 事件 处 于 目标 阶段 
BUBBLING_PHASE 此 事件 处 于 冒 泡 阶段 





2. 理解 目标 阶段 
目标 阶段 是 三 个 阶段 中 最 简单 的 。 当 捕捉 阶段 完成 后 , 浏览 器 会 触发 目标 元 素 上 任何 已 添加 


的 事件 类 型 监听 右 ， 如 图 30-6 所 示 。 





a handleDescendantEvent 


AX hadleMouseEvent 





图 30-6 目标 阶段 














你 在 之 前 的 一 些 例子 中 已 经 见 过 这 个 阶段 了 。 这 里 要 注意 的 唯 点 是 可 以 多 次 调用 
addEventListener 函 数 ， 因 此 某 个 给 定 事件 类 型 可 以 有 不 止 一 个 监听 器 。 








提示 “如 果 在 目标 阶段 调用 stopPropagation 或 stopImmediatePropagation 函 数 , 相当 于 终止 了 事 
件 流 ， 不 再 进入 冒 泡 阶段 。 
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3. 理解 冒 泡 阶段 

完成 目标 阶段 之 后 , 浏览 器 开始 转 而 沿 着 上 级 元 素 链 朝 body 元 素 前 进 。 在 沿途 的 每 个 元 素 上 ， 
浏览 器 都 会 检查 是 否 存 在 针对 该 事件 类 型 但 没有 启用 捕 提 的 监听 器 ( 也 就 是 说 ,addEventListener 
函数 的 第 三 个 参数 是 false )。 这 就 是 所 谓 的 事件 冒 泡 。 代 码 清单 30-9 提 供 了 一 个 例子 。 


代码 清单 30-9 ”事件 冒 泡 


<!DOCTYPE HTML> 
























































<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 
background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 
} 
span { 
background: white; 
color: black; 
padding: 2px; 
cursor: default; 
} 
</style> 
</head> 
<body> 


<p id-"blocki"» 
There are lots of different kinds of fruit - there are over 
500 varieties of <span id="banana">banana</span> alone. By the time we add 
the countless types of apples, oranges, and other well-known fruit, we are 
faced with thousands of choices. 

</p> 

<script type="text/javascript"> 


var banana = document.getElementById("banana") ; 
var textblock = document.getElementById("block1"); 


banana.addEventListener("mouseover", handleMouseEvent) ; 
banana.addEventListener("mouseout", handleMouseEvent) ; 
textblock.addEventListener("mouseover", handleDescendantEvent, true); 
textblock.addEventListener("mouseout", handleDescendantEvent, true); 
textblock.addEventListener("mouseover", handleBubbleMouseEvent, false); 
textblock.addEventListener("mouseout", handleBubbleMouseEvent, false); 


function handleBubbleMouseEvent(e) { 
if (e.type == "mouseover" && e.eventPhase == Event.BUBBLING PHASE) { 
e.target.style.textTransform - "uppercase"; 
) else if (e.type -- "mouseout" 8& e.eventPhase -- Event.BUBBLING PHASE) ( 
e.target.style.textTransform - "none"; 
} 
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} 


function handleDescendantEvent(e) { 

if (e.type == "mouseover" && e.eventPhase == Event.CAPTURING PHASE) { 
e.target.style.border = "thick solid red"; 
e.currentTarget.style.border = "thick double black"; 

j else if (e.type == "mouseout" && e.eventPhase == Event.CAPTURING PHASE) { 
e.target.style.removeProperty("border"); 
e.currentTarget.style.removeProperty("border"); 

} 

} 


function handleMouseEvent(e) { 

if (e.type == "mouseover") { 
e.target.style.background=' black’ ; 
e.target.style.color-'white'; 

} else { 
e.target.style.removeProperty('color'); 
e.target.style.removeProperty('background'); 

} 

} 
</script> 
</body> 
</html> 


我 添加 了 一 个 名 为 handleBubbleMouseEvent 的 新 函数 ， 并 把 它 附 到 文档 的 p 元 素 上 。 现 在 p 元 素 
就 有 了 两 个 事件 监听 器 ， 一 个 启用 了 捕捉 ， 男 一 个 启用 了 冒 泡 。 当 使 用 addEventListener 方 法 时 ， 
你 始终 都 处 于 这 两 种 状态 中 的 一 种 ， 这 就 意味 着 某 个 元 素 的 监听 器 除了 自身 事件 的 通知 ， 还 会 收 
到 后 代 元 素 事件 的 通知 。 你 要 选择 的 是 在 后 代 元 素 事件 的 目标 阶段 之 前 还 是 之 后 调用 监听 器 。 
这 些 新 代码 带 来 的 结果 是 ,文档 里 的 span 元 素 在 发 生 mouseover 事 件 时 会 触发 三 个 监听 函数 。 
handleDescendantEvent 函数 会 在 捕捉 阶段 被 触发 ，handleMouseEvent 函数 会 在 目标 阶段 被 调用 ， 
而 handleBubbleMouseEvent 则 是 在 冒 泡 阶段 。 从 图 30-7 可 以 看 到 它 的 效果 。 
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图 30-7 冒 泡 阶 段 
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现在 ， 所 有 监听 函数 里 的 样式 改动 都 会 影响 到 元 素 的 外 观 ， 如 图 30-8 所 示 。 


提示 不 是 所 有 事件 都 支持 冒 泡 。 可 以 用 bubbles 属 性 来 检查 菜 个 事件 能 否 冒 
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There are lots of different kinds of fruit - there are over 500 varieties of B. 
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就 说 明 此 事件 会 冒 泡 ，false 则 意味 着 它 不 会 冒 泡 。 


30.2.3 


有 些 事件 定义 了 一 种 默认 的 行为 ,会 在 事件 被 触发 时 执行 。 举 个 例子 ，a 元 素 click 事 件 的 默 





使 用 可 撤销 事件 








图 30-8 给 冒 泡 阶段 添加 一 个 处 理 器 后 的 效果 


泡 。 如 果 值 是 true， 


认 行 为 是 浏览 器 会 载 信 href 属性 所 指定 的 URL 的 内 容 。 当 某 一 事件 拥有 默认 行为 时 ， 它 的 
cancelable 属 性 就 会 是 true。 你 可 以 调用 preventDefault 函 数 来 阻止 默认 行为 的 执行 。 代 码 清 


单 30-10 里 的 例子 演示 了 如 何在 事件 处 理 函数 中 人 处 理 可 撤销 事件 。 
代码 清单 30-10 ”撤销 默认 的 行为 


<!DOCTYPE HTML> 
<html> 








<head> 
<title>Example</title> 
<style type="text/css"> 
a { 
background: gray; 
color:white; 
padding: 10px; 
border: thin solid black 
} 
</style> 
</head> 
<body> 
<p> 
<a href="http://apress.com">Visit Apress</a> 
<a href-"http://w3c.org"»Visit W3C</a> 
</p> 
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<script type="text/javascript"> 


function handleClick(e) { 
if (!confirm("Do you want to navigate to " + e.target.href + " ?")) { 
e.preventDefault(); 


) 


var elems = document.querySelectorAll("a"); 

for (var i = 0; i < elems.length; i++) { 
elems[i].addEventListener("click", handleClick, false); 

j 


</script> 
</body> 
</html> 


在 这 个 例子 里 ， 我 用 confizm 函 数 来 提示 用 户 考虑 他 们 是 否 真 想 导航 到 a 元 素 指向 的 URL 上 。 如 
果 用 户 点 击 Cance] 按 钮 , 我 就 会 调用 preventDefault 函 数 ,这 就 意味 着 浏览 器 不 再 会 导航 到 该 URL 上 。 

请 注意 ， 调 用 preventDefault 函 数 不 会 阻止 事件 流 经 历 捕捉 、 目 标 和 冒 泡 阶 段 。 这 些 阶段 仍 
然 会 进行 ， 但 是 浏览 右 不 会 在 冒 泡 阶 段 的 最 后 执行 默认 行为 。 可 以 通过 读 取 defaultPrevented 属 
性 来 检测 preventDefault 因数 是 否 已 经 被 之 前 的 某 个 事件 处 理 器 在 事件 上 调用 过 。 如 果 它 返回 
true， 那 么 preventDefault 函 数 就 已 经 被 调用 过 了 。 


30.3 使 用 HTML 事件 


HTMLIL 定 义 了 一 些 按 类 型 分 组 的 事件 , 我 会 在 下 一 节 介 绍 它们 。 下 一 节 开 始 部 分 的 文档 和 和 窗 
口 事 件 适用 于 Document 和 Window 对 象 ， 我 已 经 在 第 25 章 和 第 26 章 讨论 了 这 些 对 和 象 。 

其 他 的 事件 在 HTMLElement 对 象 里 都 有 定义 ， 实 际 上 是 通用 的 。 为 了 支持 每 种 事件 类 型 的 特 
点 ， 浏 览 器 会 指派 带 有 和 额外 属性 ( 相对 于 核心 对 象 Event 上 的 属性 而 言 ) 的 对 象 。 看 看 下 面 这些 
例子 你 就 会 明白 我 的 意思 了 。 


30.3.1 文档 和 窗口 事件 


除了 你 在 之 前 几 章 见 过 的 那些 功能 ，Document 对 象 还 定义 了 表 30-4 里 介绍 的 事件 。 你 可 以 在 
第 25 章 的 一 个 例子 看 到 此 事件 的 使 用 方法 。 
表 30-4 ”Document 对 象 的 事件 
名 R 说 — Hj 
readystatechange 在 readystate 属 性 的 值 发 生变 化 时 触发 
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Window 对 象 定义 了 多 种 多 样 的 事件 ， 表 30-5 对 其 进行 了 介绍 。 可 以 通过 body 元 素 处 理 其 中 一 
些 事 件 ， 但 浏览 器 对 这 种 方法 的 支持 程度 不 太一 致 ， 一 般 而 言 使 用 Mindow 对 象 会 更 可 靠 一 些 。 
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表 30-5 Window 对 象 的 事件 

名 — HW Wi PH 
onabort 在 文档 或 资源 加 载 过 程 被 中 止 时 触发 
onafterprint 在 已 调用 Window.print() 方 法 , 但 尚未 给 用 户 提 供 打 印 选项 时 触发 
onbeforeprint 在 用 户 完成 文档 打印 后 触发 
onerror 在 文档 或 资源 的 加 载 发 生 错 误 时 触发 
onhashchange 在 锚 部 分 发 生变 化 时 触发 
onload 在 文档 或 资源 加 载 完成 时 触发 
onpopstate 触发 后 提供 一 个 关联 浏览 器 历史 的 状态 对 象 
onresize 在 窗口 缩放 时 触发 
onunload 在 文档 从 窗口 或 浏览 器 中 仓 载 时 触发 





30.3.2 ”使 用 鼠标 事件 
你 已 经 在 本 章 前 面 见 过 mouseover 和 mouseout 事 件 了 ， 而 表 30-6 展 示 了 鼠标 相关 事件 的 完整 集合 。 
表 30-6 与 鼠标 相关 的 事件 



























































ee ee 
click 在 点 击 并 释放 鼠标 键 时 触发 
dblclick 在 两 次 点 击 并 释放 鼠标 键 时 触发 
ousedown 在 点 击 鼠 标 键 时 触发 
jouseenter 在 光标 移 人 元 素 或 某 个 后 代 元 素 所 占据 的 屏幕 区 域 时 触发 
ouseleave 在 光标 移出 元 素 及 所 有 后 代 元 素 所 占据 的 屏幕 区 域 时 触发 
jousemove 当 光 标 在 元 素 上 移动 时 触发 
ouseout 与 mrouseleave 基 本 相同 ， 除 了 当 光 标 仍然 在 某 个 后 代 元 素 上 时 也 会 触发 
jouseover 与 mouseenter 基 本 相同 ， 除 了 当 光 标 仍然 在 某 个 后 代 元 素 上 时 也 会 触发 
ouseup 在 释放 鼠标 键 时 触发 

















当 某 个 鼠标 事件 被 触发 时 , 浏览 器 会 指派 一 个 MouseEvent 对 象 。 它 是 一 个 Event 对 象 , 但 带 有 


表 30-7 中 展示 的 额外 属性 和 方法 。 














表 30-7 MouseEvent 对 象 



































名 K 说 明 i E 
button 标明 点 击 的 是 哪个 键 。0 是 鼠标 主键 ，1 是 中 键 ，2 是 次 键 /右键 数值 
altKey 如 果 在 事件 触发 时 按 下 了 alt/option 键 则 返回 true 布尔 值 
clientX 返回 事件 触发 时 鼠标 相对 于 元 素 视 口 的 X 坐 标 数值 
clientY 返回 事件 触发 时 鼠标 相对 于 元 素 视 口 的 Y 坐 标 数值 
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( 续 ) 
名 称 说 — HH i& E 
screenX 返回 事件 触发 时 鼠标 相对 于 屏幕 坐标 系 的 X 坐 标 数值 
screenY 返回 事件 触发 时 鼠标 相对 于 屏幕 坐标 系 的 Y 坐 标 数值 
shiftKey 如 果 在 事件 触发 时 按 下 了 Shift 键 则 返回 true 布尔 值 
ctrlKey 如 果 在 事件 触发 时 按 下 了 Ctrl 键 则 返回 true 布尔 值 
































代码 清单 30-11 展 示 了 如 何 使 用 MouseEvent 对 象 所 提供 的 额外 功能 。 
代码 清单 30-11 使 用 MouseEvent 对 象 响应 鼠标 事件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 
background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 
j 
table ( margin: 5px; border-collapse: collapse; } 
th, td (padding: 4px; } 
«/style» 
«/head» 
«body» 
«p id-"blocki"» 
There are lots of different kinds of fruit - there are over 
500 varieties of banana alone. By the time we add the countless types of 
apples, oranges, and other well-known fruit, we are faced with thousands 
of choices. 
</p> 
<table border="1"> 
<tr><th>Type:</th><td id="eType"></td></tr> 
<tr><th>X:</th><td id="eX"></td></tr> 
«tr»«th»Y:«/th»«td id="eY"></td></tr> 
</table> 





<script type="text/javascript"> 
var textblock = document.getElementById("block1"); 
var typeCell = document.gettlementById("eType"); 
var xCell = document.gettlementById("eX"); 
var yCell = document.gettlementById("eY"); 


textblock.addEventListener("mouseover", handleMouseEvent, false); 
textblock.addEventListener("mouseout", handleMouseEvent, false); 
textblock.addEventListener("mousemove", handleMouseEvent, false); 
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function handleMouseEvent(e) { 
if (e.eventPhase == Event.AT TARGET) { 
typeCell.innerHTML = e.type; 
xCell.innerHTML = e.clientX; 
yCell.innerHTML - e.clientY; 


if (e.type == "mouseover") { 
e.target.style.background='black' ; 
e.target.style.color-'white'; 

} else { 
e.target.style.removeProperty('color'); 
e.target.style.removeProperty('background'); 

} 

} 
} 
</script> 
</body> 
</html> 


这 个 例子 中 的 脚本 会 更 新 表格 的 一 些 单元 格 ， 以 此 来 响应 两 类 鼠标 事件 。 从 图 30-9 也 可 以 看 











到 它 的 效果 。 
[ = Sc} 
J Example x X S N 
€ Q | O titan/listings/example.html YA 


There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By | 
the time we add the countless types of apples, oranges. and other well-known fruit, we are 
faced with thousands of choices. | 




















图 30-9 ”处 理 鼠 标 事 


ES 


30.3.3 ”使 用 键盘 焦点 事件 
与 键盘 焦点 相关 的 事件 触发 于 元 素 获 得 和 失去 焦点 之 时 。 表 30-8 概 述 了 这 些 事件 。 





















表 30-8 与 键盘 焦点 相关 的 事件 
£ 称 说 明 
blur 在 元 素 失去 焦点 时 触发 
focus 在 元 素 获 得 焦点 时 触发 
focusin 在 元 素 即 将 获得 焦点 时 触发 
focusout 在 元 素 即将 失去 焦点 时 触发 








FocusEvent 对 象 代 表 了 这 些 事件 ， 相 对 于 Event 对 象 的 核心 功能 ， 它 还 增加 了 表 30-9 里 展示 的 


三 
Pam) 
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表 30-9 FocusEvent 对 象 

















名 称 说 明 返 回 
relatedTarget 元 素 即 将 获得 或 失去 焦点 。 这 个 属性 只 用 于 focusin 和 focusout 事 件 HTMLElement 

















代码 清单 30-12 演 示 了 如 何 使 用 键盘 焦点 事件 。 
代码 清单 30-12 ”使 用 键盘 焦点 事件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pi 





pun 


background: gray; 
color:white; 

padding: 10px; 

margin: 5px; 

border: thin solid black 





} 
</style> 
</head> 
<body> 
<form> 
<p> 
«label for="fave">Fruit: <input autofocus id-"fave" name="fave"/></label> 
</p> 
<p> 
«label for="name">Name: «input id-"name" name="name"/></label> 
</p> 
«button type-"submit"»Submit Vote</button> 
«button type="reset">Reset</button> 
</form> 


<script type="text/javascript"> 


var inputElems = document.getElementsByTagName("input") ; 

for (var i = 0; i < inputElems.length; i++) { 
inputElems[i].onfocus = handleFocusEvent; 
inputElems[i].onblur = handleFocusEvent; 





} 


function handleFocusEvent(e) { 
if (e.type == "focus") { 
e.target.style.backgroundColor = "lightgray"; 
e.target.style.border - "thick double red"; 
) else ( 
e.target.style.removeProperty("background-color"); 
e.target.style.removeProperty("border"); 
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} 
</script> 
</body> 
</html> 


这 个 例子 里 的 脚本 用 focus 和 blur 事 件 来 改变 一 对 input 元 素 的 样式 。 从 图 30-10 可 以 看 到 它 的 
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/ Example x X A 
€ Q | Q titan/listings/example.html AW 
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iic MThisisfocused | 
Submit Vote 





























图 30-10 使 用 focus 和 blur 事 件 








30.3.4 ”使 用 键盘 事件 
键盘 事件 由 按键 操作 触发 。 表 30-10 展 示 了 这 一 类 事件 。 
表 30-10 与 键盘 相关 的 事件 











名 PW 说 明 

keydown 在 用 户 按 下 某 个 键 时 触发 
keypress 在 用 户 按 下 并 释放 某 个 键 时 触发 
keyup 在 用 户 释 放 某 个 键 时 触发 





KeyboardEvent 对 象 代 表 了 这 些 事件 ， 相 对 于 Event 对 象 的 核心 功能 ， 它 还 增加 了 表 30-11 里 展 
示 的 属性 。 





表 30-11 KeyboardEvent 对 象 

















名 W 说 — H8 ig g 
char 返回 按键 代表 的 字符 字符 串 
key 返回 所 按 的 键 字符 串 
ctrlKey 如 果 在 按键 时 Ctrl 键 处 于 按 下 状态 则 返回 true 布尔 值 
shiftKey 如 果 在 按键 时 Shift 键 处 于 按 下 状态 则 返回 true 布尔 值 
altKey 如 果 在 按键 时 Alt 键 处 于 按 下 状态 则 返回 true 布尔 值 
repeat 如 果 该 键 一 直 处 于 按 下 状态 则 返回 true 布尔 值 
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代码 清单 30-13 展 示 了 其 中 一 些 键 盘 事 件 的 用 法 。 


代码 清单 30-13 ”使 用 键盘 事件 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<style type="text/css"> 
pt 
background: gray; 
color:white; 
padding: 10px; 
margin: 5px; 
border: thin solid black 
} 
</style> 
</head> 
<body> 
<form> 
<p> 
«label for="fave">Fruit: <input autofocus id-"fave" name="fave"/></label> 
</p> 
<p> 
«label for="name">Name: «input id-"name" name="name"/></label> 
</p> 
«button type-"submit"»Submit Vote</button> 
«button type="reset">Reset</button> 
</form> 
<span id="message"></span> 
<script type="text/javascript"> 
var inputElems = document.getElementsByTagName("input") ; 
for (var i = 0; i < inputElems.length; i++) { 
inputElems[i].onkeyup = handleKeyboardEvent ; 
} 
function handleKeyboardEvent(e) { 
document .getElementById("message").innerHTML = "Key pressed: " + 
e.keyCode + " Char: " + String. fromCharCode(e.keyCode) ; 
} 
</script> 
</body> 
</html> 





这 个 例子 里 的 脚本 通过 改变 某 个 span 元 素 的 内 容 来 显示 发 送 给 一 对 input 元 素 的 按键 。 请 注 
意 我 如 何 用 String.fromCharCode 函 数 把 keyCode 属 性 的 值 转换 成 了 一 个 更 有 用 的 值 。 从 图 30-11 可 
以 看 到 这 段 脚 本 的 效果 。 
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图 30-11 使 用 键盘 事件 


30.3.5 ”使 用 表单 事件 
fornm 元 素 定义 了 两 种 只 适用 于 此 元 素 的 特殊 事件 。 表 30-12 介 绍 了 它们 。 


表 30-12 form 事件 


名 称 说 明 名 称 说 明 
submit 在 表单 提交 时 触发 Teset 在 表单 重 置 时 触发 





























我 会 在 第 33 章 和 第 34 章 向 你 展示 Ajax ， 到 时 你 可 以 了 解 如 何 使 用 表单 事件 。 





30.4 小结 


在 这 一 章 里 , 我 解释 了 事件 系统 让 你 可 以 如 何 对 文档 元 素 的 状态 变化 作出 反应 。 我 向 你 展 
示 了 处 理事 件 的 不 同方 法 , 从 以 on 开头 的 简单 属性 , 到 使 用 处 理 器 函数 , 再 到 addEventListener 
方法 ,它们 各 有 优势 。 我 还 解释 了 事件 生命 周期 的 三 个 阶段 ( 捕捉 、 目 标 和 冒 泡 )， 以 及 如 何 
用 这 些 阶段 来 拦截 传播 中 的 事件 。 在 这 一 章 的 最 后 ， 我 介绍 了 大 多 数 HTML 元 素 都 可 用 的 那些 
事件 。 
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文档 对 象 模型 4 DOM ) 定义 了 一 组 对 象 来 代表 文档 里 不 同类 型 的 HTML 元 素 。 这 些 对 象 可 以 
被 当做 HTMLElement 对 象 ， 而 且 在 大 多 数 情况 下 你 的 脚本 也 正 是 这 么 做 的 。 但 是 ， 如 果 想 要 访问 
某 些 元 素 特 有 的 属性 或 功能 ， 经 常 可 以 通过 它们 中 的 某 个 对 象 做 到 。 

这 些 对 象 的 用 处 并 不 大 ,它们 通常 定义 了 一 些 属性 来 对 应 元 素 所 支持 的 HTML 属 性 ,而 HTML 
属性 的 值 可 以 通过 HTMLElement 中 的 功能 进行 访问 。 不 过 有 几 处 例外 : 表单 元 素 有 一 些 有 用 的 方 
法 可 以 进行 输入 验证 ， 表 格 元 素 则 有 一 些 方法 可 以 用 于 构建 表格 内 容 。 


31.4 文档 和 元 数据 对 象 
一 节 介 绍 代表 数据 元 素 和 元 数据 元 素 的 对 象 。 从 第 7 章 可 以 进一步 了 解 这 些 元 素 。 


31.1.1 base 元素 


base 元 素 是 由 HTMLBaseElement 对 象 代表 的 。 这 个 对 象 没 有 定义 任何 额外 的 事件 , 但 有 两 个 属 
生 ， 如 表 31-1 所 示 。 




































































一 二 





表 31-1 HTMLBaseElement 对 象 





名 称 说 | OB 返 E 
href 对 应 于 href 属 性 字符 串 
target 对 应 于 target 属 性 字符 串 








31.1.2 body 元 素 


body 元 素 是 由 HTMLBodyElement 对 象 代表 的 。 这 个 对 象 没 有 定义 任何 额外 的 属性 , 但 有 一 组 事 
件 ， 如 表 31-2 所 示 。 








表 31-2 HTMLBodyElement 的 事件 

















事 件 说 明 
error 在 脚本 或 图 像 等 资源 的 加 载 发 生 错 误 时 触发 
load 在 文档 和 它 的 所 有 资源 都 已 加 载 完成 时 触发 
unload ED AAI BOO ( 通常 是 因为 用 户 导航 到 了 别处 ) 时 触发 
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提示 “有 些 浏览 器 通过 Nindow 对 象 来 支持 这 些 事件 ， 第 27 章 介绍 过 这 个 对 象 。 


31.1.3 link 元 素 























link 元 素 是 由 HTMLLinkElement 对 象 代 表 的 。 这 个 对 象 定义 的 属性 如 表 31-3 所 示 。 














表 31-3 HTMLLinkElement 对 象 























名 W 说 OB 返回 
disabled 对 应 于 disabled 属 性 布尔 值 
href 对 应 于 href 属 性 字符 串 
rel 对 应 于 rel 属 性 字符 串 
media 对 应 于 media 属 性 字符 串 
hreflang 对 应 于 hreflang 属 性 字符 串 
type 对 应 于 type 属 性 cB 











31.1.4 meta 元 素 




















meta 元 素 是 由 HTMLMetaElement 对 象 代表 的 。 这 个 对 象 定 义 的 属性 如 表 31-4 所 示 。 


表 31-4 HTMLMetaElement 对 象 





























名 称 说 — HH 返 回 
name 对 应 于 name 属 性 字符 串 
httpEquiv 对 应 于 http-equiv 属 性 字符 串 
content 对 应 于 content 属 性 字符 串 


31.1.5 script 元 素 




















script 元 素 在 DOM 里 是 由 HTMLScriptElement 对 象 代 表 的 。 这 个 对 象 定 义 的 额外 属性 如 表 31-5 
所 示 。 

















表 31-5 HTMLScriptElement 对 象 























名 FW 说 OBB 返回 
src 对 应 于 src 属 性 字符 串 
async 对 应 于 async 属 性 布尔 值 
defer 对 应 于 defer 属 性 布尔 值 
type 对 应 于 type 属 性 字符 串 
charset 对 应 于 charset 属 性 字符 串 
text 对 应 于 text 属 性 字符 串 




















652 第 31 章 使 用 元 素 专 属 对 象 





31.1.6 style 元 素 


style 元 素 在 DOM 里 是 由 HTMLStyleElement 对 象 代表 的 。 这 个 对 象 定义 的 额外 属性 如 表 31-6 
所 示 。 


表 31-6 ”HTMLStyleElement 对 象 

















名 mm 说 明 ix g 
disabled 对 应 于 disabled 属 性 布尔 值 
media 对 应 于 media 属 性 字符 串 
typed 对 应 于 typed 属 性 字符 串 
scoped 对 应 于 scoped 属 性 布尔 值 


31.1.7 title 元 素 


title 元 素 在 DOM 里 是 由 HTMLTitleElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-7 
所 示 。 


表 31-7 HTMLTitleElement 对 象 











text 获取 或 设置 title 元 素 的 内 容 





名 HW 说 明 ià g 
E: 


31.1.8 其 他 文档 和 元 数据 元 素 


head 和 html 元 素 分 别 是 由 HTMLHeadElement 和 HTMLHtmlElement 对 象 代表 的 。 这些 对 象 没 有 定义 
HTMLElement 之 外 的 任何 方法 、 属 性 或 事件 noscript 元 素 没 有 专属 的 DOM 对 象 , 只 由 HTMLElement 
代表 。 


31.2 LATA 


这 一 节 介 绍 代表 文本 元 素 的 对 象 。 你 可 以 从 第 8 章 进 一 步 了 解 这 些 元 素 。 











31.2.1 a 元 素 




















a 元 素 是 由 HTMLAnchorElement 对 象 代表 的 。 这 个 对 象 定 义 的 属性 如 表 31-8 所 示 。 除 了 给 对 应 
的 元 素 属 性 定义 属性 外 ,此 对 象 还 定义 了 一 组 便捷 属性 ， 让 你 能 够 很 容易 地 获取 或 设置 URL ( 由 
href 属 性 指定 ) 的 各 个 组 成 部 分 。 





























表 31-8 HTMLAnchorElement 对 象 





















































































































































名 i 说 OB 返回 
href 对 应 于 href 属 性 字符 串 
target 对 应 于 target 属 性 字符 串 
rel 对 应 于 rel 属 性 字符 串 
media 对 应 于 media 属 性 字符 串 
hreflang 对 应 于 hreflang 属 性 字符 串 
type 对 应 于 type 属 性 字符 串 
text 获取 或 设置 此 元 素 包 含 的 文本 字符 串 
protocol 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 协议 名 部 分 字符 串 
host 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 主机 名 和 端口 号 部 分 字符 串 
hostname 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 主机 名 部 分 字符 串 
port 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 端口 号 部 分 字符 串 
pathname 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 路 径 部 分 字符 串 
search 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 查询 字符 串 部 分 字符 串 
hash 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 文档 片段 部 分 字符 串 

































































31.2.2 del 和 ins 元 素 


del 和 ;ins 元 素 都 是 由 HTMLModElement 对 象 代表 的 。 可 以 用 HTMLElement 定 义 的 tagName 属 性 来 区 31 
分 它们 ， 详 情 请 参见 第 26 章 。HTMLModElement 定 义 的 额外 属性 如 表 31-9 所 示 。 





























表 31-9 HTMLModElement 对 象 














名 称 说 明 返 回 

cite 对 应 于 cite 属 性 字符 串 

dateTime 对 应 于 datetime 属 性 字符 串 
3123 4 元 素 





qd 元 素 是 由 HTMLQuoteElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-10 所 示 。 


表 31-10 ”HTMLQuoteElement 对 象 











名 称 说 明 返 回 
cite 对 应 于 cite 属 性 字符 串 








31.2.4 time 元 素 























time 元 素 是 由 HTMLTimeElement 对 象 代表 的 。 这 个 对 象 定 义 的 额外 属性 如 表 31-11 所 示 。 














本 
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表 31-11 HTMLTimeElement 对 象 
TETUR MR ooo g Bnn E aO 











返 E 
dateTime 对 应 于 datetime 属 性 字符 串 
pubDate 对 应 于 pubdate 属 性 字符 串 
valueAsDate 解析 时 间 和 日 期 ， 并 返回 一 个 Date 对 象 Date 





31.2.5 ”其 他 文本 元 素 


br FI span 4} Jil] Ze FH HTMLBRELement 和 HTMLSpanElement 对 象 代 表 的 。 这 些 对 象 有 定义 
HTMLElement 之 外 的 任何 方法 、 属 性 或 事件 。 以 下 这 些 元 素 只 由 HTMLElement 代 表 : abbr, b, cite, 


code, dfn, em, i, u, kbd, mark, rt, rp, ruby, s, samp, small, strong, sub, sup、var 和 wbr。 











31.3 ”分 组 元 素 
一 节 介绍 了 代表 分 组 元 素 的 对 象 。 你 可 以 在 第 9 章 进一步 了 解 这 些 元 素 。 





31.3.1 blockquote 元 素 


blockquote 元 素 是 由 HTMLQuoteElement 对 象 代表 的 。 这 个 对 象 就 是 我 在 表 31-10 介 绍 过 的 q 元 素 
所 用 的 对 象 。 


31.3.2 1i 元 素 
1i 元 素 是 由 HTMLLIElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-12 所 示 。 


表 31-12 HTMLLIElement 对 象 
名 称 说 ĦA i m 
value 对 应 于 value 属 性 数值 














31.3.3 ol 元 素 
ol 元 素 是 由 HTMLOListElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-13 所 示 。 





表 31-13 HTMLOListElement 对 象 











名 A 说 OAR 返 E 
reversed 对 应 于 reversed 属 性 布尔 值 
start 对 应 于 start 属 性 数值 
type 对 应 于 type 属 性 字符 串 
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31.3.4 其 他 分 组 元 素 
表 31-14 展 示 了 一 些 分 组 元 素 , 代表 它们 的 元 素 专属 对 象 没 有 定义 任何 HTMLElement 之 外 的 功能 。 
表 31-14 ”没有 额外 属性 的 分 组 元 素 对 象 











名 FR DOM 对 象 
div HTMLDivElement 
di HTMLDListElement 
hr HTMLHRElement 
p HTMLParagraphElement 
pre HTMLPreElement 
ul HTMLUListElement 
以 下 这 些 元 素 没有 对 应 的 DOM 对 象 ， 由 HTMLElement 代 表 : dd, dt, figcaptionfllfigure, 


31.4 KATA 
这 一 节 介绍 了 代表 区 块 元 素 的 对 象 。 你 可 以 在 第 10 章 进一步 了 解 这 些 元 素 。 
31.4.1 details 元 素 


details 元 素 是 由 HTMLDetailsElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-1$ 所 示 。 

表 31-15 HTMLDetailsElementwtR 

名 称 说 明 返 回 
open 对 应 于 open 属 性 布 

















31.4.2 ”其 他 区 块 元 素 


h1 ~ h6 元 素 是 由 HTMLHeadingElement 对 象 代表 的 ， 但 这 个 对 象 没 有 定义 任何 额外 的 以 
下 这 些 区 块 元 素 不 由 专属 对 象 代表 : address, article, aside, footer, header, hgroup, 
sectionfllsummary. 


31.5 “表格 元 素 
这 一 节 介 绍 了 代表 表格 元 素 的 对 象 。 你 可 以 从 第 11 章 进一步 了 解 这 些 元 素 。 















































31.5.1 col 和 colgroup 元 素 


























col 和 colgroup 元 素 都 是 由 HTMLTableColElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-16 
所 示 。 
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表 31-16 HTMLTableColElement 对 象 



































































































































名 W 说 明 ik E 
span 对 应 于 span 属 性 数值 
31.5.2 table 元 素 
table 元 素 是 由 HTMLTableElement 对 象 代表 的 。 它 是 最 有 用 的 元 素 专属 对 象 之 一 。 这 个 对 象 定 
义 的 属性 和 方法 如 表 31-17 所 示 。 
表 31-17 HTMLTableElement 对 象 
名 M 说 Hj Bm E 
border 对 应 于 border 属 性 字符 串 
caption 返回 表格 的 caption 元 素 HTMLE lement 
createCaption() 返回 表格 的 caption 元 素 ， 如 果 有 必要 就 创建 它 HTMLElement 
deleteCaption() 删除 表格 的 caption 元 素 void 
tHead 返回 表格 的 thead 元 素 HTMLTableSectionElement 
createTHead() 返回 表格 的 thead 元 素 ， 如 果 有 必要 就 创建 一 个 HTMLTableSectionElement 
deleteTHead() 删除 表格 的 thead 元 素 void 
tFoot 返回 表格 的 tfoot 元 素 HTMLTableSectionElement 
createTFoot() 返回 表格 的 tfoot 元 素 ， 如 果 有 必要 就 创建 一 个 HTMLTableSectionElement 
deleteTFoot () 删除 表格 的 tfoot 元 素 void 
tBodies 返回 表格 的 tbody 元 素 HTMLTableSectionElement | ] 
createTBody() 返回 表格 的 tbody 元 素 ， 如 果 有 必要 就 创建 一 个 HTMLTableSectionElement 
IOWS 返回 表格 各 行 HTMLTableRowElement[ ] 
insertRow(<index>) 在 表格 的 指定 位 置 创建 一 个 新 行 HTMLTableRowElement 
deleteRow(<index>) 删除 指定 索引 处 的 表格 行 void 








31.5.3 thead, tbody 和 tfoot 元 素 





thead, 、tbody 和 tfoot 元 素 都 是 由 HTMLTableSectionElement 对 象 代 表 的 。 这 个 对 象 定义 的 


和 方法 如 表 31-18 所 示 。 


表 31-18 HTMLTableSectionElement 对 象 





















































名 A 说 — 明 返 回 
IOWS 返回 表格 此 区 块 的 各 行 HTMLTableRowElement[] 
insertRow(<index>) 在 指定 索引 处 插入 一 个 新 行 HTMLTableRowElement 
deleteRow(«index») 删除 指定 索引 处 的 行 void 
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31.5.4 th 元 素 


th 元 素 是 由 HTMLTableHeaderCellElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-19 所 示 。 


表 31-19 HTMLTableHeaderCellElement 对 象 








名 称 说 明 返 回 
rows 返回 表格 此 区 块 的 各 行 HTMLTableRowElement[] 
insertRow(<index>) 在 指定 索引 处 插入 一 个 新 行 HTMLTableRowElement 
deleteRow(<index>) 删除 指定 索引 处 的 行 void 


31.5.5 tr 元 素 
tr 元 素 是 由 HTMLTableRowElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 和 方法 如 表 31-20 所 示 。 



































表 31-20 ”HTMLTableRowElement 对 象 
名 W 说 — Bj ig E 
rowIndex 返回 行 在 表格 里 的 位 置 数值 
sectionRowIndex 返回 行 在 表格 区 块 里 的 位 置 数值 
cells 返回 单元 格 元 素 的 集合 HTMLElement[ ] 
insertCell(<index>) 在 指定 索引 处 插 和 人 一 个 新 单元 格 HTMLElement 
deleteCell(«index) 删除 指定 索引 处 的 单元 格 void 


31.5.6 ”其 他 表格 元 素 


表 31-21 展 示 了 一 些 表格 元 素 ， 代 表 它 们 的 元 素 专 属 对 象 没 有 定义 任何 HTMLElement 之 外 的 
功能 。 





W 





#31-21 没有 额外 属性 的 表格 元 素 对 象 


名 M DOM 对 象 名 M DOM 对 象 
caption HTMLTableCaptionElement td HTMLTableDataCellElement 





31.6 ”表单 元 素 
这 一 节 介 绍 代 表 表 单元 素 的 对 象 。 你 可 以 在 第 12 章 至 第 14 章 进一步 了 解 这 些 元 素 。 


31.6.1 button 元 素 





button 元 素 是 由 HTMLButtonElement 对 象 代 表 的 。 这 个 对 象 定义 的 属性 和 方法 如 表 31-22 所 示 。 
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表 31-22 HTMLButtonElement 对 象 



































名 称 说 明 返 回 
autofocus 对 应 于 autofocus 属 性 布尔 值 
disabled 对 应 于 disabled 属 性 布尔 值 
form 返回 此 元 素 关联 的 form 元 素 HTMLFormElement 
formAction 对 应 于 formaction 属 性 字符 串 
formEncType 对 应 于 formenctype 属 性 字符 串 
formMethod 对 应 于 formmethod 属 性 字符 串 
formNoValidate 对 应 于 formnovalidate 属 性 字符 串 
formTarget 对 应 于 formtarget 属 性 字符 串 
name 对 应 于 name 属 性 字符 串 
type 对 应 于 type 属 性 字符 串 
value 对 应 于 value 属 性 字符 串 
labels 返回 属性 与 此 button 元 素 相关 的 说 明 标 签 元 素 HTMLLabelElement[ ] 





31.6.2 datalist 元 素 


datalist 元 素 是 由 HTMLDataListElement 对 象 代表 的 。 这 个 对 象 定 义 的 




















性 如 表 31-23 所 示 。 
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3231-23 HTMLDataListElementwtR 








名 称 说 明 返 回 
options 返回 datalist 元 素 包 含 的 option 元 素 集合 HTMLOptionElement[] 











31.6.3 fieldset 元 素 


fieldset 元 素 是 由 HTMLFieldSetElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-24 所 示 。 




















ni 




















4231-24 HTMLFieldSetElementx]$ 


























名 称 说 — HH iR [s] 
disabled 对 应 于 disabled 属 性 布尔 值 

form 对 应 于 form 属 性 HTMLFormElement 
name 对 应 于 name 属 性 字符 串 
elements 返回 fieldset 包 含 的 表单 控件 集合 HTMLElement[ ] 























31.6.4 form 元 素 
form 元 素 是 由 HTMLFormElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 和 方法 如 表 31-25 所 示 。 











5231-25 ”HTMLFormElement 对 象 





























































































































名 称 说 明 ik E 
acceptCharset 对 应 于 accept-charset 属 性 字符 串 
action 对 应 于 action 属 性 SNR 
autocomplete 对 应 于 autocomplete 属 性 字符 串 
enctype 对 应 于 enctype 属 性 字符 串 
encoding 对 应 于 enctype 属 性 字符 串 
method 对 应 于 method 属 性 字符 串 
name 对 应 于 name 属 性 字符 串 
noValidate 对 应 于 novalidate 属 性 布尔 值 
target 对 应 于 target 属 性 字符 串 
elements 返回 表单 里 的 所 有 元 素 HTMLElement[] 
length 返回 表单 里 的 元 素数 量 数值 
[<name>] 返回 具有 指定 名 称 的 表单 元 素 HTMLElement 
[<index> ] 返回 位 于 指定 索引 处 的 表单 元 素 HTMLElement 
submit() 提交 表单 void 
reset () 重 置 表单 void 
checkValidity() 如 果 所 有 表单 元 素 都 通过 了 输入 验证 就 返回 true， 和 否则 返回 false 布尔 值 























31.6.5 input 元 素 
input 元 素 是 由 HTMLInputElement 对 象 代表 的 。 这 个 对 象 支持 的 属性 和 方法 如 表 31-26 所 示 。 


表 31-26 HTMLInputElement 对 象 



































名 称 说 — HB ik [s] 
accept 对 应 于 accept 属 性 字符 串 
alt 对 应 于 alt 属 性 字符 串 
autocomplete 对 应 于 autocomplete 属 性 字符 串 
autofocus 对 应 于 autofocus 属 性 布尔 值 
checked 如 果 元 素 被 选中 则 返回 true 布尔 值 
dirName 对 应 于 dirname 属 性 字符 串 
disabled 对 应 于 disabled 属 性 布尔 值 
form 对 应 于 form 属 性 字符 串 
formAction 对 应 于 formaction 属 性 字符 串 
formEnctype 对 应 于 formenctype 属 性 字符 串 
formMethod 对 应 于 formmethod 属 性 字符 串 





























































































































































































































(E) 

名 称 说 明 ik E 
formNoValidate 对 应 于 formnovalidate 属 性 字符 串 
formTarget 对 应 于 formTarget 属 性 字符 串 
list 对 应 于 1list 属 性 HTMLElement 
max 对 应 于 max 属 性 字符 串 
maxLength 对 应 于 maxlength 属 性 数值 
min 对 应 于 min 属 性 字符 串 
multiple 对 应 于 multiple 属 性 布尔 值 
name 对 应 于 name 属 性 字符 串 
pattern 对 应 于 pattern 属 性 字符 串 
placeholder 对 应 于 placeholder 属 性 字符 串 
readOnly 对 应 于 readonly 属 性 布尔 值 
required 对 应 于 required 属 性 布尔 值 
size 对 应 于 size 属 性 数值 
src 对 应 于 src 属 性 字符 串 
step 对 应 于 step 属 性 字符 串 
type 对 应 于 type 属 性 字符 串 
value 对 应 于 value 属 性 字符 串 
valueAsDate 获取 或 设置 日 期 形式 的 value 属 性 Date 
valueAsNumber 获取 或 设置 数字 形式 的 value 属 性 数值 
selectedOption 从 list 属 性 指定 的 datalist 里 获取 匹配 input 元 素 value 的 option 元 素 HTMLOptionElement 
stepUp(<step>) 给 value 增 加 指定 的 量 void 
stepDown(<step>) 给 value 减 少 指 定 的 量 void 
willValidate 如 果 此 元 素 将 在 提交 表单 时 进行 输入 验证 就 返回 true, 否则 返回 false ”布尔 值 
validity 返回 对 输入 的 有 效 性 评估 ValidityState 
validationMessage 返回 在 应 用 输入 验证 时 展示 给 用 户 的 错误 消息 字符 串 
checkValidity() 对 此 元 素 执行 输入 验证 布尔 值 
setCustomValidity(<msg>) ”设置 一 条 自 定义 的 验证 消息 void 
labels 返回 与 此 元 素 关 联 的 说 明 标签 元 素 HTMLLabelElement[] 


31.6.6 label 元 素 


label 元 素 是 由 HTMLLabelElement 对 象 代 表 的 。 这 个 对 象 定义 的 
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性 如 表 31-27 所 示 。 
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表 31-27 HTMLLabelElement 对 象 
名 称 说 明 ik g 
form 返回 与 此 元 素 关联 的 form HTMLFormElement 
htmlFor 对 应 于 for 属 性 字符 串 
control 返回 for 属 性 所 指定 的 元 素 HTMLElement 
31.6.7 legend 元 素 
legend 元 素 是 由 HTMLLegendElement 对 象 代 表 的 。 这 个 对 象 定义 的 属性 如 表 31-28 所 示 。 
表 31-28 HTMLLegendElement 对 象 
名 称 说 Hj i; E 
form 返回 与 此 元 素 关联 的 form HTMLFormElement 


31.6.8 optgroup 元 素 








optgroup 元 素 是 由 HTMLOptGroupElement 对 象 代表 的 。 这 个 对 象 定义 的 属性 如 表 31-29 所 示 。 


表 31-29 HTMLOptGroupElement 对 象 


























名 称 说 明 返 回 
disabled 对 应 于 disabled 属 性 布尔 值 
label 对 应 于 label 属 性 字符 串 


31.6.9 option 元 素 


option 元 素 是 由 HTMLOptionElement 对 象 代表 的 。 这 个 对 象 定义 的 






































表 31-30 HTMLOptionElement 对 象 

名 PW 说 明 返 g 

disabled 对 应 于 disabled 属 性 布尔 值 

form 返回 与 此 元 素 关 联 的 form HTMLFormElement 

label 对 应 于 label 属 性 字符 串 

selected 对 应 于 selected 属 性 布尔 值 

value 对 应 于 value 属 性 字符 串 

text 对 应 于 text 属 性 字符 串 

index 返回 此 元 素 在 select 父 元 素 里 的 索引 数值 
31.6.10 output 元 素 


output 元 素 是 由 HTMLOutputElement 对 象 代表 的 。 这 个 对 象 定 义 的 














属性 如 表 31-31 所 示 。 











31.6.11 






















































































select 元 素 
select 元 素 是 由 HTMLSelectElement 对 象 代 表 的 。 这 个 对 象 实现 的 属 己 
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表 31-31 HTMLOutputElement 对 象 
名 称 说 明 ik E 
htmlFor 对 应 于 for 属 性 字符 串 
form 返回 与 此 元 素 关 联 的 form HTMLFormElement 
name 对 应 于 name 属 性 字符 串 
type 对 应 于 type 属 性 字符 串 
value 对 应 于 value 属 性 字符 串 
willValidate 如 果 此 元 素 将 在 提交 表单 时 进行 输入 验证 就 返回 true， 否 则 返回 false 布尔 值 
validationMessage 返回 在 应 用 输入 验证 时 展示 给 用 户 的 错误 消息 字符 串 
checkValidity() 对 此 元 素 执行 输入 验证 布尔 值 
setCustomValidity(<msg>) ”设置 一 条 自 定义 的 验证 消息 void 
labels 返回 与 此 元 素 关联 的 说 明 标 签 元 素 HTMLLabelElement[] 


如 表 31-32 所 示 。 


表 31-32 HTMLSelectElement 对 象 




































































































































































名 称 说 明 iR [s] 

autofocus 对 应 于 autofocus 属 性 布尔 值 
disabled 对 应 于 disabled 属 性 布尔 值 
form 返回 与 此 元 素 关联 的 form HTMLFormElement 
multiple 对 应 于 multiple 属 性 布尔 值 
name 对 应 于 name 属 性 SER 
required 对 应 于 required 属 性 布尔 值 
size 对 应 于 size 属 性 数值 
type 如 果 此 元 素 带 有 multiple 属 性 就 返回 select-multiple， 和 否则 返 字符 串 

select-one 
options 返回 option 元 素 的 集合 HTMLOptionElement [] 
length 获取 或 设置 选项 元 素 的 数量 数值 
[<index> ] 获取 指定 索引 处 的 元 素 HTMLELement 
selectedOptions 返回 选中 的 option 元 素 HTMLOptionElement[] 
selectedIndex 返回 第 一 个 选中 option 元 素 的 索引 数值 
value 获取 或 设置 选中 的 值 字符 串 
willValidate 如 果 此 元 素 将 在 提交 表单 时 进行 输入 验证 就 返回 true， 和 否则 返回 ARE 

false 
validationMessage 返回 在 应 用 输入 验证 时 展示 给 用 户 的 错误 消息 FP 
checkValidity() 对 此 元 素 执行 输入 验证 布尔 值 
setCustomValidity(<msg>) ”设置 一 条 自 定义 的 验证 消息 void 
labels i HTMLLabelElement[ ] 








返回 与 此 元 素 关联 的 说 明 标 签 元 素 
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31.6.12 textarea 元 素 

















textarea 元 素 是 由 HTMLTextAreaElement 对 象 代表 的 。 这 个 对 象 定义 的 方法 和 属性 如 表 31-33 








所 示 。 
表 31-33 HTMLTextAreaElement 对 象 
名 o P 说 — HB ix g 
autofocus 对 应 于 autofocus 属 性 布尔 值 
cols 对 应 于 cols 属 性 数值 
dirName 对 应 于 dirname 属 性 字符 串 
disabled 对 应 于 disabled 属 性 布尔 值 
form 返回 与 此 元 素 关 联 的 form HTMLFormElement 
maxLength 对 应 于 maxlength 属 性 数值 
name 对 应 于 name 属 性 字符 串 
placeholder 对 应 于 placeholder 属 性 字符 串 
readonly 对 应 于 readonly 属 性 布尔 值 
required 对 应 于 required 属 性 布尔 值 
TOWS 对 应 于 rows 属 性 数值 
wrap 对 应 于 wrap 属性 字符 串 
type 返回 textarea 字符 串 
value 返回 此 元 素 的 内 容 字符 串 
textLength 返回 value 属 性 的 长 度 数值 
willvalidate ras MUN SERRE 否则 返回 布尔 值 
validationMessage 返回 在 应 用 输入 验证 时 展示 给 用 户 的 错误 消息 字符 串 
checkValidity() 对 此 元 素 执行 输入 验证 布尔 值 
setCustomValidity(<msg>) ”设置 一 条 自 定义 的 验证 消息 void 
labels 返回 与 此 元 素 关联 的 说 明 标 签 元 素 HTMLLabelElement[ ] 
31.7 内容 元 素 
这 一 节 介 绍 的 对 象 代表 了 用 于 在 文档 里 嵌入 内 容 的 元 素 。 你 可 以 在 第 15 章 进一步 了 解 这 些 
元 素 。 


:十 二 
注 [=] 
(Lis 





其 他 内 容 元 素 (比如 canvas 和 video ) 会 在 后 







































































































































































的 第 34 章 介绍 。 
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31.7.1 area 元 素 


area 元 素 是 由 HTMLAreaElement 对 象 代表 的 。 这 个 对 象 实现 的 属性 如 表 31-34 所 示 。 


表 31-34 HTMLAreaElement 对 象 















































































































































名 o P 说 — HH i& E 
alt 对 应 于 alt 属 性 字符 串 
coords 对 应 于 coords 属 性 字符 串 
shape 对 应 于 shape 属 性 字符 串 
href 对 应 于 href 属 性 字符 串 
target 对 应 于 target 属 性 字符 串 
rel 对 应 于 rel 属 性 字符 串 
media 对 应 于 media 属 性 字符 串 
hrefLang 对 应 于 hreflang 属 性 字符 串 
type 对 应 于 type 属 性 字符 串 
protocol 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 协议 名 部 分 字符 串 
hos 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 主机 名 和 端口 号 部 分 字符 串 
hostname 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 主机 名 部 分 FAT 
por 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 端口 号 部 分 字符 串 
pathname 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 路 径 部 分 字符 串 
search 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 查询 字符 串 部 分 字符 串 
hash 这 个 便捷 属性 用 于 获取 或 设置 href 属 性 值 里 的 文档 片段 部 分 字符 串 
31.7.2 embed 元 素 
embed 元 素 是 由 HTMLEmbedElement 对 象 代表 的 。 这 个 对 象 实现 的 属性 如 表 31-35 所 示 。 
表 31-35 HTMLEmbedElement 对 象 
名 称 说 — Hj i& E 
src 对 应 于 src 属 性 字符 串 
type 对 应 于 type 属 性 字符 串 
width 对 应 于 width 属 性 字符 串 
height 对 应 于 height 属 性 字符 串 











31.7.3 iframe 元 素 





iframe 元 素 是 由 HTMLIFrameElement 对 象 代 表 的 。 这 个 对 象 实现 的 属性 如 表 31-36 所 示 。 















































































































































表 31-36 HTMLIFrameElementx]$& 
名 PW 说 HH 返 å g 
src 对 应 于 src 属 性 字符 串 
srcdoc 对 应 于 srcdoc 属 性 字符 串 
name 对 应 于 name 属 性 字符 串 
sandbox 对 应 于 sandbox 属 性 字符 串 
seamless 对 应 于 seamless 属 性 字符 串 
width 对 应 于 width 属性 字符 串 
height 对 应 于 height 属 性 字符 串 
contentDocument 返回 document 对 象 Document 
contentWindow 返回 window 对 象 Window 
31.7.4 img 元 素 
img 元 素 是 由 HTMLImageElement 对 象 代表 的 。 这 个 对 象 实现 的 属性 如 表 31-37 所 示 。 
表 31-37 HTMLImageElement 对 象 
名 i 说 明 ik E 
alt 对 应 于 alt 属 性 字符 串 
src 对 应 于 src 属 性 字符 串 
useMap 对 应 于 usemap 属 性 字符 串 
isMap 对 应 于 ismap 属 性 布尔 值 
width 对 应 于 width 属性 数值 
height 对 应 于 height 属 性 数值 
complete 如 果 图 像 已 被 下 载 则 返回 true 布尔 值 
31.7.5 map 元 素 
map 元 素 是 由 HTMLMapElement 对 象 代表 的 。 这 个 对 象 实现 的 属性 如 表 31-38 所 示 。 
表 31-38 HTMLMapElement 对 象 
名 称 说 明 w E 
name 对 应 于 name 属 性 字符 串 
areas 返回 分 区 响应 图 里 所 有 的 area 元 素 HTMLAreaElement [] 
jimages 返回 分 区 响应 图 里 所 有 的 img 和 object 元 素 HTMLELement[ ] 


31.7.6 meter 元 素 








meter 元 素 是 由 HTMLMeterElement 对 象 代 表 的 。 这 个 对 象 实现 的 属 履 





FE 如 表 31-39 所 示 。 
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表 31-39 HTMLMeterElement 对 象 






































名 o P 说 OB ig E 
value 对 应 于 value 属 性 数值 
max 对 应 于 max 属 性 数值 
form 返回 与 此 元 素 关 联 的 form HTMLFormElement 
labels 返回 与 此 元 素 关联 的 说 明 标 签 元 素 HTMLLabelElement[] 


31.7.7 object TH 








object 元 素 是 由 HTMLObjectElement 对 象 代表 的 。 这 个 对 象 实现 的 属性 如 表 31-40 所 示 。 


表 31-40 ”HTMLObjectElement 对 象 












































































































































名 称 说 明 返 回 
data 对 应 于 data 属 性 字符 串 
type 对 应 于 type 属 性 字符 串 
form 返回 与 此 元 素 关联 的 form HTMLFormElement 
name 对 应 于 name 属 性 字符 串 
useMap 对 应 于 usemap 属 性 字符 串 
width 对 应 于 width 属性 字符 串 
height 对 应 于 height 属 性 字符 串 
contentDocument 返回 document 对 象 Document 
contentWindow 返回 window 对 象 Window 
willValidate 如 果 此 元 素 将 在 提交 表单 时 进行 输入 验证 就 返回 true, 否则 返回 false ”布尔 值 
validationMessage 返回 在 应 用 输入 验证 时 展示 给 用 户 的 错误 消息 FAT 
checkValidity() 对 此 元 素 执行 输入 验证 布尔 值 
setCustomValidity(<msg>) ”设置 一 条 自 定义 的 验证 消息 void 
labels 返回 与 此 元 素 关联 的 说 明 标 签 元 素 HTMLLabelElement[] 


31.7.8 param 元 素 


param 元 素 是 由 HTMLParamElement 对 象 代 表 的 。 这 个 对 象 实现 的 属性 如 表 31-41 所 示 。 


表 31-41 HTMLParamElement 对 象 








WW 








名 称 说 明 i; E 
name 对 应 于 name 属 性 字符 串 
value 对 应 于 value 属 性 字符 串 
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31.7.9 progress 元 素 


progress 元 素 是 由 HTMLProgressElement 对 象 代表 的 。 这 个 对 象 实现 的 属性 如 表 31-42 所 示 。 





表 31-42 HTMLProgressElement 对 象 
































名 o P 说 明 返 回 

value 对 应 于 value 属 性 数值 

max 对 应 于 max 属 性 数值 

position 对 应 于 position 属 性 数值 

form 返回 与 此 元 素 关 联 的 form HTMLFormElement 

labels 返回 与 此 元 素 关 联 的 说 明 标 签 元 素 HTMLLabelElement[] 
31.8 小 结 


在 这 一 章 里 ， 我 列举 了 各 组 在 DOM 中 代表 不 同类 型 元 素 的 对 象 。 在 大 多 数 情况 下 ， 它 们 并 
不 是 特别 有 用 ( 除了 两 个 例外 )。 一 个 例外 是 表单 元 素 ， 它 们 提供 了 一 些 有 用 的 验证 和 表单 提交 
控制 。 另 一 个 例外 是 表格 元 素 ， 它 们 提供 了 一 些 管理 表格 内 容 的 方法 。 此 外 , 本 章 介绍 的 对 象 大 
体 上 都 是 一 些 属 性 的 集合 ， 分 别 代表 具体 的 HTIML 属 性 ， 而 后 者 的 值 可 以 通过 无 处 不 在 的 
HTMLElement 对 象 进行 访问 。 



























































高 级 功能 





在 本 书 最 后 部 分 ， 我 将 向 你 展示 HTMLS 中 一 些 可 用 的 高 级 功能 。 这 些 功能 包括 Ajax (用 
于 在 后 台 向 Web 服务 器 发 送 请 求 ) 和 canvas 元 素 〈 让 我 们 能 用 JavaScript 执行 绘图 操作 )。 
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Ajax 是 现代 Web 应 用 程序 开发 的 一 项 关键 工具 。 它 让 你 能 向 服务 器 异步 发 送 和 接收 数据 ， 然 
后 用 JavaScript 解 析 。Ajax 是 Asynchronous JavaScript and XML ( 异步 JavaScript 与 XML ) 的 缩写 。 这 
个 名 称 诞生 于 XML 还 是 数据 传输 首选 格式 的 时 期 ， 不 过 ， 我 后 面 会 谈 到 ， 这 种 情形 已 不 复 存 在 。 

Ajax 属于 那 种 带 有 争议 性 的 技术 。 它 对 于 创建 富 Web 应 用 程序 是 如 此 有 用 ， 以 至 于 设计 师 和 
开发 者 们 围绕 它 创建 了 一 种 文化 , 并 且 时 常会 参与 到 “怎样 才 算 是 正确 使 用 Ajax ”的 激烈 论战 中 。 
这 些 争论 大 多 数 训 无 价值 , 也 没有 必要 。 当 你 深入 Ajax 的 细节 后 , 会 发 现 它 其 实 出 人 意料 地 简单 , 
你 几乎 不 用 花 多 少时 间 就 能 像 高 手 一 样 创建 请 求 。 我 在 如 何 应 对 极端 人 士 上 的 通用 建议 同样 适用 
于 Ajax 极端 人 士 : 有 礼貌 地 点 涉 ， 后退， 然后 在 自己 的 项 目 上 做 正确 的 事 。 
















































































提示 “你 会 发 现 Ajax 存在 许多 不 同 的 大 小 写 方式 。 目 前 “Ajax” 似 乎 是 使 用 最 广泛 的 一 种 ， 不 
过 AJAX 也 很 常见 ， 有 些 人 甚至 使 用 AJaX ( 这 些 挑 史 的 人 坚信 你 永远 不 应 该 大 写 “and”)。 
它们 所 指 的 都 是 同样 的 技术 和 技巧 。 我 在 这 本 书 里 尽量 统一 使 用 Ajax。 


Ajax 核心 规范 的 名 称 继承 于 你 用 来 建立 和 发 起 请 求 的 JavaScript 对 象 : XMLHttpRequest。 这 一 
规范 有 两 个 等 级 。 所 有 主流 浏览 器 都 实现 了 第 一 级 (Level 1 )， 它 代表 了 基础 级 别 的 功能 。 第 二 
级 (Level2 ) 扩展 了 最 初 的 规范 ， 纳 入 了 额外 的 事件 和 一 些 功 能 来 让 它 更 容易 与 form 元 素 协作 ， 
并 且 支 持 一 些 相 关 的 规范 ( 例如 CORS， 我 会 在 本 章 后 面 加 以 介绍 )。 

在 这 一 章 里 ,我 会 讲解 Ajax 的 基础 知识 ,向 你 展示 如 何 创建 、 配 置 和 执行 简单 的 请 求 。 我 会 向 
你 展示 如 何 将 事件 作为 请 求 的 进度 信号 ， 如 何 处 理 请 求 和 应 用 程序 错误 ， 以 及 如 何 跨 源 发 起 请 求 。 

本 章 所 有 例子 都 是 关于 从 服务 器 上 获取 数据 的 。 下 一 章 则 都 是 关于 发 送 数据 的 , 特别 是 表单 
数据 ， 因 为 它 是 Ajax 最 常见 的 用 途 之 一 。 表 32-1 提 供 了 本 章 内 容 概 要 。 


表 32-1 本章 内 容 概要 

























































































问 题 解决 方案 代码 清单 
发 起 一 个 Ajax 请 求 创建 一 个 XMLHttpRequest 对 象 ， 然 后 调用 open 和 send 方 法 32-1 ~ 32-3 
使 用 一 次 性 事件 追踪 请 求 的 进度 使 用 第 二 级 的 事件 ， 比 如 onload、onloadstart 和 onloadend 32-4 





























探测 和 处 理 错误 响应 错误 事件 ， 或 者 使 用 try...catch 语 句 32-5 
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(E) 
|] — s 解决 方案 代码 清单 
设置 Ajax 请 求 的 标 头 使 用 setRequestHeader 方 法 32-6 ~ 32-7 
读 取 服 务 器 响应 的 标 头 使 用 getResponseHeader 和 getAllResponseHeaders 方 法 32-8 
发 起 跨 源 Ajax 请 求 设置 服务 器 响应 里 的 Access-Control-Allow-0rigin 标 头 32-9 ~ 32-12 
中 止 一 个 请 求 使 用 abort 方 法 32-13, 32-14 




















32.4 Ajax 起 步 


Ajax 的 关键 在 于 XMLHttpRequest 对 象 , 而 理解 这 个 对 象 的 最 佳 方式 是 看 个 例子 。 代 码 清 单 32-1 
展示 了 XMLHttpRequest 对 象 的 基本 用 法 。 


代码 清单 32-1 使 用 XMLHttpRequest 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<div> 
<button>Apples</button> 
<button>Cherries</button> 
<button>Bananas</button> 
</div> 
<div id="target"> 
Press a button 
</div> 
<script> 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 
} 








function handleButtonPress(e) { 
var httpRequest = new XMLHttpRequest(); 
httpRequest.onreadystatechange = handleResponse; 
httpRequest.open("GET", e.target.innerHTML + ".html"); 
httpRequest. send(); 


function handleResponse(e) { 
if (e.target.readyState == XMLHttpRequest.DONE && 
e.target.status == 200) { 
document.getElementById("target").innerHTML 
- e.target.responseText; 
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</script> 
</body> 
</html> 


这 个 例子 里 有 三 个 button 元 素 , 它们 分 别 带 有 不 同 的 水 果 说 明 标签 : Apples ( 苹果 )、 Cherries 
(樱桃 ) 和 Bananas (香蕉 )。 另 外 还 有 一 个 div 元 素 ， 它 在 一 开始 会 显示 一 段 简单 的 消息 ， 让 用 户 


按 下 其 中 一 个 按钮 。 从 图 32-1 可 以 看 到 这 个 文档 的 样子 。 





= — oS! 
© Example E 
€ > Q Q titan/listings/example.htm *X| 








[Apples | [ Cherries.) [Bananas | 
| Press a button 














图 32-1 ”一 个 简单 的 Ajax 示例 的 开始 状态 











当 某 一 个 按钮 被 按 下 后 ， 示 例 中 的 脚本 会 载 入 另 一 个 HTML 文 档 ， 并 让 它 成 为 div 元 素 的 内 
容 。 其 他 的 文档 一 共有 三 个 ， 分 别 对 应 button 元 素 上 的 说 明 标 签 : apples.html, cherries.html 


和 bananas.html。 图 32-2 显 示 了 其 中 的 一 个 文档 ， 以 此 作为 对 按钮 点 击 的 响应 。 


cai 








Pose — 
€ > Œ QOtitan/listings/example.htm wit 





[Apples | [ Cherries) [Bananas | 





True cherry fruits are borne by members of the subgenus Cerasus, 


| 

| 
which is distinguished by having the flowers in small corymbs of | 
several together (not singly. nor in racemes). and by having a | 
smooth fruit with only a weak groove or none along one side. The 


m 


subgenus is native to the temperate regions of the Northern 
J Hemisphere, with two species in America, three in Europe, and the | | | 
remainder in Asia. The majority of eating cherries are derived from either Prunus avium, 
the wild cherry (sometimes called the sweet cherry), or from Prunus cerasus, the sour -| 
= = 2! 
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图 32-2 ”显示 一 个 异步 载 和 的 文档 

















这 三 个 额外 的 文档 非常 简单 : 一 张 图 片 加 上 一 段 从 维基 百科 的 相关 水 果 页 面 上 摘录 下 来 的 文 
本 。 作 为 参考 ,代码 清单 32-2 展 示 了 cherries.html 的 内 容 , 但 三 个 文档 都 遵循 相同 的 结构 ( 并 且 包 





含 在 本 书 的 源 代码 下 载 之 内 ， 可 以 在 http://apress.com 上 人 免费 获取 )。 


代码 清单 32-2 ”cherries.html 的 内 容 


<!DOCTYPE HTML> 
<html> 
<head> 
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<title>Cherries</title> 
<style> 
img { 
float: left; padding: 2px; margin: 5px; 
border: medium double black; background-color: lightgrey; 
} 
</style> 
</head> 
<body> 
<p> 
<img src="cherries.png" alt="cherry"/> 
True cherry fruits are borne by members of the subgenus Cerasus, which is 
distinguished by having the flowers in small corymbs of several together 
(not singly, nor in racemes), and by having a smooth fruit with only a weak 
groove or none along one side. The subgenus is native to the temperate 
regions of the Northern Hemisphere, with two species in America, 
three in Europe, and the remainder in Asia. The majority of eating cherries 
are derived from either Prunus avium, the wild cherry (sometimes called the 
sweet cherry), or from Prunus cerasus, the sour cherry. 
</p> 
</body> 
</html> 


随 着 用 户 点 击 各 个 水 果 按 钮 , 浏览 器 会 异步 执行 并 取 回 所 请 求 的 文档 , 而 主 文档 不 会 被 重新 
加 载 。 这 就 是 典型 的 Ajax 行 为 。 

如 果 把 注意 力 移 到 脚本 上 , 你 就 能 明白 这 一 切 是 如 何 实现 的 。 首 先是 handleButtonPress 函 数 ， 
脚本 会 调用 它 以 响应 button 控 件 的 click 事 件 : 


function handleButtonPress(e) { 
var httpRequest = new XMLHttpRequest(); 
httpRequest .onreadystatechange = handleResponse; 
httpRequest.open("GET", e.target.innerHTML + ".html"); 
httpRequest.send(); 














— 








NU 


第 一 步 是 创建 一 个 新 的 XMLHttpRequest 对 象 。 与 之 前 在 DOM 中 见 过 的 大 多 数 对 象 不 同 , 你 并 
非 通过 浏览 器 定义 的 某 个 全 局 变量 来 访问 这 类 对 象 ， 而 是 使 用 关键 词 new， 就 像 这 样 : 


var httpRequest = new XMLHttpRequest(); 


Par eA readystatechangeS# (4-1 B — "E EASE. ERE ETRE PR A fih 
发 ， 向 你 提供 事情 的 进展 情况 。 我 会 在 本 章 后 面 讨论 这 个 事件 (以 及 其 他 由 XMLHttpRequest 对 象 
定义 的 事件 )。 我 将 onreadystatechange 属 性 的 值 设 为 handleResponse， 稍 后 会 讨论 这 个 函数 : 
httpRequest.onreadystatechange = handleResponse; 

现在 你 可 以 告诉 XMLHttpRequest 对 象 你 想 要 做 什么 了 。 使 用 open 方 法 来 指定 HTTP 方 法 ( 在 这 
里 是 GET ) 和 需要 请 求 的 URL: 


httpRequest.open("GET", e.target.innerHTML + ".html"); 
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提示 “我 在 这 里 展示 的 是 open 方 法 最 简单 的 形式 。 你 还 可 以 给 浏览 器 提供 向 服务 器 发 送 请 求 时 
使 用 的 认证 信息 ， 就 像 这 样 : httpRequest.open("GET", e.target.innerHTML + ".html", 
true,，"adam"，"secret")。 最 后 两 个 参数 是 应 当 发 送 给 服务 器 的 用 户 名 和 密码 。 剩 下 的 
那个 参数 指定 了 该 请 求 是 否 应 当 异 步 执行 。 它 应 该 始终 被 设置 为 true。 

















根据 用 户 按 下 的 button 来 生成 请 求 的 URL。 如 果 按 的 是 Apples 按 钮 , 就 请 求 Apples.html 这 个 
URL. 浏览 器 可 以 足够 智能 地 处 理 相 对 URL , 它 会 在 需要 时 使 用 当前 文档 的 地 址 。 在 这 个 例子 中 ， 
我 的 主 文档 是 从 http://titan/listings/example.html 这 个 URL 上 和 载 入 的 ， 因 此 Apples.html 会 被 当成 
http://titan/listings/Apples.html。 这 些 URL 在 你 的 环境 里 会 有 所 不 同 ， 但 效果 是 一 样 的 。 








提示 为 你 的 请 求 选择 正确 的 HTTP 方 法 是 很 重要 的 。 正 如 我 在 第 12 章 所 说 的 ，GET 请 求 适 用 
于 安全 的 交互 行为 ， 就 是 那些 你 可 以 反复 发 起 而 不 会 带 来 副作用 的 请 求 。P0OST 请 求 适 
用 于 不 安全 的 交互 行为 ， 意 思 是 每 一 个 请 求 都 会 导致 服务 器 端 发生 某 种 变化 ， 而 重复 
的 请 求 可 能 会 带 来 问题 。 虽 然 还 有 一 些 别 的 HTTP 方 法 ， 但 GET 和 POST 是 使 用 最 为 广泛 
的 , 广泛 到 如 果 你 想 用 其 他 方法 , 就 必须 使 用 32.4.1 节 描述 的 惯例 来 确保 你 的 请 求 能 通 
过 防火 墙 。 


这 个 函数 的 最 后 一 步 是 调用 send 方 法 ， 就 像 这 样 : 

httpRequest.send(); 

我 在 这 个 例子 里 没有 向 服务 器 发 送 任何 数据 , 所 以 send 方 法 无 参数 可 用 。 我 会 在 这 一 章 的 后 
面向 你 展示 如 何 发 送 数据 ， 但 在 这 个 简单 的 示例 中 ， 你 只 是 从 服务 器 请 求 HTMI 文 档 。 








32.1.1 ”处 理 响 应 


一 旦 脚本 调用 了 send 方 法 , 浏览 器 就 会 在 后 台 发 送 请 求 到 服务 器 。 因 为 请 求 是 在 后 台 处 理 的 ， 
所 以 Ajax 依 靠 事 件 来 通知 你 这 个 请 求 的 进展 情况 。 在 这 个 例子 中 ， 我 用 handleResponse 函 数 处 理 
这 些 事件 : 

function handleResponse(e) { 


if (e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200) { 
document.getElementById("target").innerHTML = e.target.responseText; 
i 














} 

当 readystatechange 事 件 被 触发 后 , 浏览 需 会 把 一 个 Event 对 象 传递 给 指定 的 处 理 函 数 。 这 个 
Event 对 象 我 在 第 30 章 介绍 过 ，target 属 性 则 会 被 设 为 与 此 事件 关联 的 XMLHttpRequest。 

多 个 不 同 的 阶段 会 通过 readystatechange 事 件 传 递 信 号 MRE DA E XMLHttpRequest. 
readystate 属 性 的 值 来 确定 当前 处 理 的 是 哪 一 个 。 表 32-2 展 示 了 这 个 属性 的 各 个 值 。 
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表 32-2 XMLHttpRequest readyState 属 性 的 值 

















值 数 值 说 OBB 
UNSENT 0 已 创建 XMLHttpRequest 对 象 
OPENED 1 已 调用 open 方 法 
HEADERS RECEIVED 2 已 收 到 服务 器 响应 的 标 头 
LOADING 3 已 收 到 服务 器 响应 
DONE 4 响应 完成 或 已 失败 




















DONE 状 态 并 不 意味 着 请 求 成 功 , 它 只 代表 请 求 已 完成 -可 以 通过 status 属 性 获得 HTTP 状 态 码 ， 
它 会 返回 一 个 数值 ( 比如 ，200 这 个 值 代表 成 功 )。 只 有 结合 readyState 和 status 属 性 的 值 才能 够 
确定 某 个 请 求 的 结果 。 

在 handleResponse 函 数 里 可 以 看 到 我 怎样 检查 这 两 个 属性 。 只 有 当 readySstate 的 值 为 DONE 并 
且 status 的 值 为 200 时 我 才 会 设置 div 元 素 的 内 容 。 用 XMLHttpRequest.responseText 属 性 获得 服务 
器 发 送 的 数据 ， 就 像 这 样 : 

document.getElementById("target").innerHTML = e.target.responseText; 

TesponseText 属 性 会 返回 一 个 字符 串 , 代表 从 服务 器 上 取 回 的 数据 。 我 用 这 个 属性 来 设置 div 
元 素 innerHTML 属 性 的 值 ， 以 显示 被 请 求 文档 的 内 容 。 这 些 就 构成 了 一 个 简单 的 Ajax 示例 : 用 户 
点 击 一 个 按钮 ,浏览 器 在 后 台 向 服务 器 请 求 一 个 文档 ， 当 它 到 达 时 你 处 理 一 个 事件 ,并 显示 被 请 
求 文档 的 内 容 。 图 32-3 展 示 了 这 段 脚 本 的 效果 以 及 它 所 显示 的 不 同文 档 。 
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CH Apples. f Cherries [^ Banana is the common name for herbaceous plants of the genus Musa and | 
for the fruit they produce. Bananas come in a variety of sizes and colors |F 
when ripe, including yellow, purple, and red. Almost all modem edible 

se is di parthenocarpic bananas come from the two wild species Musa acuminata 


and Musa balbisiana. The scientific names of bananas are e Musa 
M balbisi i 


| (Apples) (Chd / © Example 
€ 39 C Otitan 
























图 32-3 ”基本 Ajax 示例 中 的 脚本 效果 


32.4. ”主流 中 的 异类 : 应 对 Opera 


进入 下 一 部 分 之 前 ， 我 们 必须 花 点 时 间 来 应 对 Opera 浏 览 器 的 XMLHttpRequest 标 准 实现 方式 ， 
这 种 方式 …… 怎 么 说 呢 , 不 如 其 他 浏览 锅 那 么 好 或 者 完整 。 本 章 开 头 所 展示 的 例子 在 其 他 主流 浏 
The EARR Ex THE, 但 需要 做 些 修改 来 应 对 Opera 的 几 个 问题 。 代 码 清单 32-3 展 示 了 这 个 例子 ， 
其 中 已 做 了 必要 的 修改 。 
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代码 清单 32-3 ”修改 示例 以 支持 Opera 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<div> 
<button>Apples</button> 
<button>Cherries</button> 
<button>Bananas</button> 
</div> 
<div id="target"> 
Press a button 
</div> 
<script> 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 
} 


var httpRequest; 


function handleButtonPress(e) { 

ttpRequest = new XMLHttpRequest (); 
ttpRequest.onreadystatechange = handleResponse; 
ttpRequest.open("GET", e.target.innerHTML + ".html"); 
ttpRequest.send(); 


= 


= i uu, 


} 





function handleResponse() { 

if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
document .getElementById("target") .innerHTML 
= httpRequest. responseText; 

} 

} 

</script> 
</body> 
</html> 


第 一 个 问题 是 Opera 在 触发 readystatechange 事 件 时 不 会 生成 一 个 Event 对 象 。 这 就 意味 着 必 
须 把 XMLHttpRequest 对 象 指派 给 一 个 全 局 变量 ,这 样 才能 在 以 后 引用 它 。 我 定义 了 一 个 名 为 
httpRequest 的 var， 随 后 在 handleButtonPress 消 数 创建 对 象 以 及 handleResponse 孙 数 处 理 已 完成 
请 求 时 调用 了 它 。 
看 上 去 可 能 不 像 是 什么 大 问题 , 但 如 果 用 户 在 请 求 处 理 过 程 中 按 下 按钮 , 全 局 变量 就 会 被 指 
派 给 一 个 新 的 XMLHttpRequest 对 象 ， 你 就 无 法 再 与 原来 那个 请 求 交互 了 。 

第 二 个 问题 是 Opera 没 有 在 XMLHttpRequest 对 象 上 定义 就 绪 状 态 常 量 。 这 就 意味 着 你 必须 用 我 
在 表 32-2 里 展示 的 数值 来 比 对 readyState 属 性 的 值 。 必 须 得 检查 4 这 个 值 , 而 不 是 XMLHttpRequest . 
DONE; 
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希望 当 你 阅读 本 书 时 Opera 已 经 升级 和 改进 了 它 的 XMLHttpRequest 实 现 方式 ,但 如 果 情 况 并 非 
如 此 ， 你 就 需要 编写 脚本 来 适应 这 种 有 问题 的 行为 。 


32.2 ”使 用 Ajax 事件 


建立 和 探索 一 个 简单 的 示例 之 后 ,你 现在 可 以 开始 深入 了 解 XMLHttpRequest 对 象 支持 的 功能 ， 
以 及 如 何在 你 的 请 求 中 使 用 它们 了 。 起 点 就 是 第 二 级 规范 里 定义 的 那些 额外 事件 。 你 已 经 见 过 其 
中 一 个 了 : readystatechange。 它 是 从 第 一 级 转 过 来 的 ， 其 他 还 有 一 些 ， 如 表 32-3 所 示 。 


表 32-3 XMLHttpRequest 对 象 定义 的 事件 
















































































名 称 说 明 事件 类 型 
abort 在 请 求 被 中 止 时 触发 ProgressEvent 
error 在 请 求 失败 时 触发 ProgressEvent 
load 在 请 求 成 功 完 成 时 触发 ProgressEvent 
loadend 在 请 求 已 完成 时 触发 ,无论 成 功 还 是 发 生 错 误 ProgressEvent 
loadstart 在 请 求 开 始 时 触发 ProgressEvent 
progress 触发 以 提示 请 求 的 进度 ProgressEvent 
readystatechange 在 请 求生 命 周 期 的 不 同 阶段 触发 Event 
timeout 如 果 请 求 超时 则 触发 ProgressEvent 


这 些 事件 大 多 数 会 在 请 求 的 某 一 个 特定 时 点 上 触发 。readystatechange ( 之 前 介绍 过 ) 和 
progress 这 两 个 事件 是 例外 ， 它 们 可 以 多 次 触发 以 提供 进度 更 新 。 

除了 readystatechange 之 外 ， 表 中 展示 的 其 他 事件 都 定义 于 XMLHttpRequest 规 范 的 第 二 级 。 
在 我 编写 本 书 时 ， 浏览 器 对 这 些 事件 的 支持 程度 不 一 。 比 如 ，Firefox 浏 览 嚣 有 着 最 完整 的 支持 ， 
Opera 完 全 不 支持 它们 ， 而 Chrome 支 持 其 中 的 一 些 ， 但 是 所 使 用 的 方式 并 不 符合 规范 。 





警告 考虑 到 第 二 级 事件 的 实现 还 不 到 位 , readystatechange 是 目前 唯一 能 可 靠 追 踪 请 求 进度 的 
事件 。 


调度 这 些 事件 时 ， 浏 览 器 会 对 readystatechange 事 件 使 用 常规 的 Event 对 象 ( 在 第 30 章 介绍 
过 )， 对 其 他 事件 则 使 用 ProgressEvent 对 和 象 。ProgressEvent 对 和 象 定义 了 Event 对 象 的 所 有 成 员 ， 
并 增加 了 表 32-4 中 介绍 的 这 些 成 员 。 


表 32-4 ”ProgressEvent 定 义 的 额外 属性 












































名 W 说 明 事件 类 型 
lengthComputable 如 果 能 够 计算 数据 流 的 总 长 度 则 返回 true 布尔 值 
loaded 返回 当前 已 载 和 的 数据 量 数值 
total 返回 可 用 的 数据 总 量 数值 
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代码 清单 32-4 展 示 了 如 何 使 月 








最 为 完整 和 正确 。 


代码 清单 32-4 ”使 用 XMLHttpRequ 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 


有 这 些 事件 。 我 使 用 Firefox 浏 览 器 进行 展示 ， 


est 定 义 的 一 次 性 事件 


table { margin: 10px; border-collapse: collapse; float: left} 
div {margin: 10px;} 
td, th { padding: 4px; } 


</style> 
</head> 
<body> 

<div> 


<button>Apples</button> 
<button>Cherries</button> 
<button>Bananas</button> 


</div> 


<table id="events" border="1"> 


</table> 

<div id="target"> 
Press a button 

</div> 

<script> 


var buttons = document.getElementsByTagName("button") ; 


for (var i = 0; i < 
buttons[i].oncl 
} 


var httpRequest; 


function handleButt 
clearEventDetai 
httpRequest = n 
httpRequest .onr 
httpRequest.one 
httpRequest.onl 
httpRequest.onl 
httpRequest.onl 
httpRequest.onp 
httpRequest.ope 
httpRequest.sen 

} 


function handleResp 


buttons.length; i++) { 
ick = handleButtonPress; 


onPress(e) { 

1sQ; 

ew XMLHttpRequest(); 
eadystatechange - handleResponse; 
rror - handleError; 

oad = handleLoad; 

oadend = handleLoadEnd; 
oadstart = handleLoadStart; 
rogress = handleProgress; 
n("GET", e.target.innerHTML + 
d(); 


" html"); 


onse(e) { 


displayEventDetails("readystate(" + httpRequest.readyState + ")"); 


if (httpRequest.readyState == 4 8& httpRequest.status == 200) { 


document .getElementById("target").innerHTML 
- httpRequest.responseText; 
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} 


function handleError(e) { displayEventDetails("error", e);} 
function handleLoad(e) { displayEventDetails("load", e);} 

function handleLoadEnd(e) { displayEventDetails("loadend", e);) 
function handleLoadStart(e) { displayEventDetails("loadstart", e);} 
function handleProgress(e) { displayEventDetails("progress", e);} 


function clearEventDetails() { 
document .getElementById("events").innerHTML 
= "<tr><th>Event</th><th> lengthComputable«/th»" 
+ "<th>loaded</th><th>total</th></tr>" 
} 


function displayEventDetails(eventName, e) { 
if (e) { 
document. getElementById("events").innerHTML += 
"<tr><td>" + eventName + "</td><td>" + e.lengthComputable 
+ "</td><td>" + e. loaded + "</td><td>" + e.total 
+ "</td></tr>"; 
} else { 
document. getElementById("events").innerHTML += 
"<tr><td>" + eventName 
+ "</td><td>NA</td><td>NA</td><td>NA</td></tr>"; 
} 
} 
</script> 
</body> 
</html> 


这 是 之 前 示例 的 一 种 变型 。 我 为 一 些 事件 注册 了 处 理 函 数 ， 并 在 一 个 table 元 素 里 为 处 理 的 cem 
每 个 事件 都 创建 了 一 条 记录 。 从 图 32-4 可 以 看 到 Firefox 浏 览 器 是 如 何 触发 这 些 事件 的 。 
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图 32-4 Firefox 浏 览 器 触发 的 第 二 级 事件 





32.3 ”处 理 错 误 
使 用 Ajax 时 必须 留心 两 类 错误 。 它 们 之 间 的 区 别 源 于 视角 不 同 。 
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第 一 类 错误 是 从 XMLHttpRequest 对 象 的 角度 看 到 的 问题 : 某 些 因素 阻止 了 请 求 发 送 到 服务 器 ， 
例如 DNS 无 法 解析 主机 名 ， 连 接 请 求 被 拒绝 ， 或 者 URL 无 效 。 

第 二 类 问题 是 从 应 用 程序 的 角度 看 到 的 问题 ， 而 非 XMLHttpRequest 对 象 。 它 们 发 生 于 请 求 成 
功 发 送 至 服务 器 ， 服 务 需 接受 请 求 、 进 行 处 理 并 生成 响应 ， 但 该 响应 并 不 指向 你 期 望 的 内 容 时 。 
举 个 例子 ， 如 果 你 请 求 的 URL 不 存在 ， 这 类 问题 就 会 发 生 。 

有 三 种 方式 可 以 处 理 这 些 错误 ， 如 代码 清单 32-$ 所 示 。 


代码 清单 32-5 ”处 理 Ajax 错 误 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<div> 
<button>Apples</button> 
<button>Cherries</button> 
<button>Bananas</button> 
<button>Cucumber</button> 
<button id="badhost">Bad Host</button> 
<button id="badurl">Bad URL</button> 
</div> 
<div id="target">Press a button</div> 
<div id="errormsg"></div> 
<div id="statusmsg"></div> 
<script> 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 




















} 





var httpRequest; 


function handleButtonPress(e) { 
clearMessages(); 
httpRequest = new XMLHttpRequest (); 
httpRequest.onreadystatechange = handleResponse; 
httpRequest.onerror = handleError; 
try { 
switch (e.target.id) { 
case "badhost": 
httpRequest.open("GET", "http://a.nodomain/doc.html"); 
break; 
case "badurl": 
httpRequest.open("GET", "http://"); 
break; 
default: 
httpRequest.open("GET", e.target.innerHTML + ".html"); 
break; 
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httpRequest.send(); 
} catch (error) { 
displayErrorMsg("try/catch", error.message) ; 


} 


function handleError(e) { 
displayErrorMsg("Error event", httpRequest.status 
* httpRequest.statusText); 
} 


function handleResponse() { 
if (httpRequest.readyState == 4) { 

var target = document.getElementById("target"); 

if (httpRequest.status == 200) { 
target.innerHTML = httpRequest. responseText; 

} else { 

document.getElementById("statusmsg").innerHTML = 
"Status: ”+ httpRequest.status + " " 
+ httpRequest.statusText; 


} 


function displayErrorMsg(src, msg) { 
document.getElementById("errormsg").innerHTML = src + ": " + msg; 


} 


function clearMessages() { 
document.getElementById("errormsg").innerHTML = ""; 
document.getElementById("statusmsg").innerHTML = ""; 
} 


</script> 
</body> 
</html> 


32.3.1 处理 设置 错误 


你 需要 处 理 的 第 一 类 问题 是 向 XMLHttpRequest 对 象 传递 了 错误 的 数据 ， 比 如 格式 不 正确 的 
URL. 它们 极其 容易 发 生 在 生成 基于 用 户 输入 的 URL 时 。 为 了 模拟 这 类 问题 , 我 给 示例 文档 添加 
了 一 个 标签 为 Bad URL ( 错误 的 URL ) 的 button。 按 下 这 个 button 会 以 下 列 形式 调用 open 方 法 : 

httpRequest.open("GET", "http://"); 

我 已 经 记 不 清 见 过 多 少 次 这 种 问题 了 ( 不 得 不 承认 ,我 自己 造成 的 也 不 少 )。 通 常 ， 提 示 用 
户 在 某 个 input 元 素 里 输入 一 个 值 ， 其 中 的 内 容 会 被 用 于 生成 Ajax 请 求 所 需 的 URL。 当 用 户 触发 
了 请 求 却 没有 输入 值 时 , 传递 给 open 方 法 的 就 会 是 一 个 残缺 的 URL , 在 这 个 例子 中 只 有 协议 部 分 。 

这 是 一 种 会 阻止 请 求 执行 的 错误 ,而 XMLHttpRequest 对 象 会 在 发 生 这 类 事件 时 抛 出 一 个 错误 。 
这 就 意味 着 你 需要 用 一 条 try...catch 语 句 来 围 住 设置 请 求 的 代码 ， 就 像 这 样 : 


















































682 第 32 章 使 用 Ajax (第 工 部 分 ) 





try { 
httpRequest.open("GET", "http://"); 
httpRequest.send(); 


} catch (error) { 
displayErrorMsg("try/catch", error.message) ; 





catch 子 句 让 你 有 机 会 从 错误 中 恢复 。 可 以 选择 提示 用 户 输入 一 个 值 ， 也 可 以 回 退 至 默认 的 
URL, 或 是 简单 地 丢弃 这 个 请 求 。 在 这 个 例子 中 , 我 仅仅 调用 了 displayErrorMsg 函 数 来 显示 错误 
消息 。 这 个 函数 是 在 示例 脚本 中 定义 的 ， 它 会 在 有 D 为 errormsg 的 div 元 素 里 显示 Error.message 这 
个 属性 。 














32.3.2 ”处 理 请 求 错误 


第 二 类 错误 发 生 在 请 求 已 生成 , 但 其 他 方面 出 错时 。 为 了 模拟 这 类 问题 , 我 给 示例 添加 了 一 
个 标签 为 Bad Host( 错误 的 主机 ) 的 按钮 。 当 这 个 按钮 被 按 下 后 ， 就 会 调用 open 方 法 访问 一 个 不 
可 用 的 URL: 

httpRequest.open("GET", "http://a.nodomain/doc.html"); 

这 个 URL 存 在 两 个 问题 。 第 一 个 问题 是 主机 名 不 能 被 DNS 解析 , 因此 浏览 器 无 法 生成 服务 器 
连接 。 这 个 问题 直到 XMLHttpRequest 对 象 开 始 生 成 请 求 时 才 会 变 得 明显 ， 因 此 它 会 以 两 种 方式 发 
出 错误 信号 。 如 果 你 注册 了 一 个 error 事 件 的 监听 器 ， 浏 览 器 就 会 向 你 的 监听 函数 发 送 一 个 Event 
对 象 。 以 下 是 我 在 示例 中 使 用 的 函数 : 


function handleError(e) { 
displayErrorMsg("Error event", httpRequest.status + httpRequest.statusText); 














当 这 类 错误 发 生 时 ， 你 能 从 XMLHttpRequest 对 象 获得 何 种 程度 的 信息 取决 于 浏览 器 ， 遗 憾 的 
是 ， 大 多 数 情 况 下 你 会 得 到 值 为 0 的 status 和 空白 的 statusText 值 。 

第 二 个 问题 是 URL 和 生成 请 求 的 脚本 具有 不 同 的 来 源 , 在 默认 情况 下 这 是 不 允许 的 。 你 通常 
只 能 向 载 人 脚本 的 同 源 URL 发 送 Ajax 请 求 。 浏 览 器 报告 这 个 问题 时 可 能 会 抛 出 Error 或 者 触发 
erTor 事 件 ， 不 同 浏览 器 的 处 理 方式 不 尽 相 同 。 不 同 浏览 器 还 会 在 不 同 的 时 点 检查 来 源 ， 这 就 意 
味 着 你 不 一 定 总 是 能 看 到 浏览 器 对 同一 个 问题 突出 显示 。 你 可 以 使 用 跨 站 资源 规范 ( CORS， 
Cross-Origin Resource Sharing ) 来 绕 过 同 源 限制 ， 参 见 32.5 节 。 


















































32.3.3 ”处 理应 用 程序 错误 


最 后 一 类 错误 发 生 于 请 求 成 功 完 成 ( 从 XMLHttpRequest 对 象 的 角度 看 ), 但 没有 返回 你 想 要 的 
数据 时 。 为 了 制造 这 类 问题 ， 我 添加 了 一 个 说 明 标签 为 Cucumber (黄瓜 ) 的 button。 按 下 这 个 按 
钮 会 生成 类 似 于 Apples 、Cherries 和 Bananas 按 钮 那样 的 请 求 URL， 但 是 服务 器 上 不 存在 


cucumber.html 这 个 文档 。 
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这 一 过 程 本 身 没有 错误 ( 因为 请 求 已 成 功 完 成 ), 你 需要 根据 status 属 性 来 确定 发 生 了 什么 。 
当 你 请 求 某 个 不 存在 的 文档 时 ， 你 会 获得 404 这 个 状态 码 ， 它 的 意思 是 服务 器 无 法 找到 请 求 的 文 
档 。 你 可 以 看 到 我 是 如 何 处 理 200 ( 意思 是 OK ) 以 外 的 状态 码 的 : 
if (httpRequest.status == 200) { 
target.innerHTML = httpRequest. responseText; 
} else { 


document.getElementById("statusmsg").innerHTML = 
"Status: " + httpRequest.status + " " + httpRequest.statusText; 





























} 

在 这 个 例子 中 ,我 只 是 简单 地 显示 了 status 和 statusText 的 值 。 而 在 真正 的 应 用 程序 里 ， 你 
需要 以 一 种 有 用 是 有 意义 的 方式 进行 恢复 C 比如 显示 备用 内 容 或 警告 用 户 有 问题 , 具体 看 哪 种 更 
适合 应 用 程序 )。 


32.4 获取 和 设置 标 头 


XMLHttpRequest 对 象 让 你 可 以 设置 发 送 给 服务 器 的 请 求 标 头 〈Header ) 和 读 取 服务 器 响应 里 
的 标 头 。 表 32-5 介 绍 了 与 标 头 有 关 的 方法 。 


表 32-5 XMLHttpRequest 对 象 中 与 标 头 有 关 的 方法 















































方 法 说 明 iR 回 
setRequestHeader(<header>, <value>) TM E (BI pk void 
getResponseHeader («header») 获取 指定 标 头 的 值 字符 串 
getAllResponseHeaders() 以 单个 字符 串 的 形式 获取 所 有 标 头 字符 串 























32.4.1 覆盖 请 求 的 HTTP 方法 


通常 不 需要 添加 或 修改 Ajax 请 求 里 的 标 头 。 浏 览 器 知道 需要 发 送 些 什么 ,服务 器 也 知道 如 何 
进行 响应 。 不 过 ， 有 几 种 情况 例外 。 第 一 种 是 X-HTTP-Method-0vetrride 标 头 。 

HTTP 标 准 通常 被 用 于 在 互联 网 上 请 求 和 传输 HTML 文 档 ， 它 定义 了 许多 方法 。 大 多 数 人 都 
知道 6ET 和 P0ST， 因 为 它们 的 使 用 最 为 广泛 。 不 过 还 存在 其 他 一 些 方法 (包括 PUT 和 DELETE ), 这 些 
HTTP 方 法 用 来 给 向 服务 器 请 求 的 URL 赋 予 意义 ， 而 且 这 种 用 法 正在 呈现 上 升 趋势 。 举 个 例子 ， 
假如 你 想 查 看 某 条 用 户 记录 ， 就 可 以 生成 这 样 一 个 请 求 : 

httpRequest.open("GET", "http://myserver/records/freeman/adam"); 
这 里 只 展示 了 HTTP 方 法 和 请 求 的 URL。 要 使 这 个 请 求 能 顺利 工作 ， 服 务 器 端 必须 有 应 用 程 
能 理解 这 个 请 求 ， 并 将 它 转变 成 一 段 合适 的 数据 以 发 送 回 服务 器 。 如 果 想 删除 数据 ， 可 以 这 





























Sa 
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httpRequest.open("DELETE", "http: //myserver/records/freeman/adam"); 


此 处 的 关键 在 于 通过 HTTP 方 法 表达 出 你 想 让 服务 器 做 什么 ， 而 不 是 把 它 用 茶 种 方式 编码 进 
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URL。 这 是 一 种 被 称 为 RESTful API 的 趋势 的 一 部 分 。RESTful API 还 包括 哪些 元 素 尚 处 在 频繁 和 
激烈 的 争论 之 中 ,我 在 这 里 就 不 参与 了 。 

以 这 种 方式 使 用 HTTP 方 法 的 问题 在 于 : 许多 主流 的 Web 技 术 只 支持 GET 和 POST， 而 且 不 少 防 
火 墙 只 人 允许 GET 和 PosT 请 求 通过 。 有 一 种 惯用 做 法 可 以 规避 这 个 限制 ， 就 是 使 用 
X-HTTP-Method-Override 标 头 来 指定 想 要 使 用 的 HTTP 方 法 , 但 形式 上 是 再 发 送 一 个 POST 请 求 。 代 
码 清单 32-6 对 此 进行 了 演示 。 


代码 清单 32-6 ”设置 一 个 请 求 标 头 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<div> 
<button>Apples</button> 
<button>Cherries</button> 
<button>Bananas</button> 
</div> 
<div id="target">Press a button</div> 
<script> 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 









































var httpRequest; 

function handleButtonPress(e) ( 

httpRequest = new XMLHttpRequest(); 
httpRequest.onreadystatechange - handleResponse; 
httpRequest.open("GET", e.target.innerHTML + ".html"); 
httpRequest.setRequestHeader("X-HTTP-Method-Override", "DELETE"); 
httpRequest.send(); 





function handleError(e) { 
displayErrorMsg("Error event", httpRequest.status 
* httpRequest.statusText); 





function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
document .gettlementById("target").innerHTML 
- httpRequest.responseText; 


} 


</script> 
</body> 
</html> 
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在 这 个 例子 中 ， 我 用 XMLHttpRequest 对 象 上 的 setRequestHeader 方 法 来 表明 我 想 让 这 个 请 求 
以 HTTP DELETE 方 法 的 形式 进行 处 理 。 请 注意 我 在 调用 open 方 法 之 后 才 设置 了 这 个 标 头 。 如 果 你 
试图 在 open 方 法 之 前 使 用 setRequestHeader 方 法 ，XMLHttpRequest 对 象 就 会 抛 出 一 个 错误 。 











提示 和 窗 盖 HTTP 方 法 需要 服务 器 端的 Web 应 用 程序 框架 能 理解 XY-HTTP-Method-0verride 这 个 惯 
例 ， 并 且 你 的 服务 器 端 应 用 程序 要 设置 成 能 寻找 和 理解 那些 用 得 较 少 的 HTTP 方 法 。 


324.2 ”禁用 内 容 缓存 


第 二 个 可 以 添加 到 Ajax 请 求 上 的 有 用 标 头 是 Cache-Control， 它 在 编写 和 调试 脚本 时 尤其 有 
用 。 一 些 浏览 器 会 缓存 通过 Ajax 请 求 所 获得 的 内 容 ， 在 浏览 会 话 期 间 不 会 再 请 求 它 。 对 我 在 这 一 
章 所 使 用 的 例子 而 言 ， 意 味 着 apples.html 、cherries.html 和 bananas.html 上 的 改动 不 会 立即 反映 到 
浏览 器 中 。 代 码 清单 32-7 展 示 了 可 以 如 何 设置 标 头 来 避免 这 一 点 。 


代码 清单 32-7 ”禁用 内 容 缓存 








function handleButtonPress(e) { 
httpRequest = new XMLHttpRequest (); 
httpRequest .onreadystatechange = handleResponse; 
httpRequest.open("GET", e.target.innerHTML + ".html"); 
httpRequest.setRequestHeader("Cache-Control", "no-cache"); 
httpRequest.send(); 


; | EE] 
设置 标 头 值 的 方式 和 之 前 的 例子 一 样 ， 但 这 次 用 到 的 标 头 是 Cache-Control， 而 你 想 要 的 值 

是 no-cache。 放 置 这 条 语句 后 ， 如 果 通 过 Ajax 请 求 的 内 容 发 生 了 改变 ， 就 会 在 下 一 次 请 求 文档 时 

体现 出 来 。 


32.4.3 ” 读 取 响应 标 头 


可 以 通过 getResponseHeader 和 getAllResponseHeaders 方 法 来 读 取 服 务 器 响应 某 个 Ajax 请 求 
时 发 送 的 HTTP 标 头 。 在 大 多 数 情 况 下 ， 你 不 需要 关心 标 头 里 有 什么 ， 因 为 它们 是 浏览 器 和 服务 
器 之 间 交 互 事务 的 组 成 部 分 。 代 码 清单 32-8 展 示 了 如 何 使 用 这 些 属性 。 


代码 清单 32-8 ” 读 取 响 应 标 头 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
ttallheaders, #ctheader { 
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border: medium solid black; 
padding: 2px; margin: 2px; 


} 
</style> 
</head> 
<body> 
<div> 
<button>Apples</button> 
<button>Cherries</button> 
<button>Bananas</button> 
</div> 
<div id="ctheader"></div> 
<div id="allheaders"></div> 
<div id="target">Press a button</div> 
<script> 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 


var httpRequest; 


function handleButtonPress(e) ( 

httpRequest = new XMLHttpRequest(); 
httpRequest.onreadystatechange - handleResponse; 
httpRequest.open("GET", e.target.innerHTML + ".html"); 
httpRequest.send(); 








function handleResponse() { 
if (httpRequest.readyState -- 2) ( 
document.getElementById("allheaders").innerHTML - 
httpRequest.getAllResponseHeaders() ; 
document.getElementById("ctheader").innerHTML - 
httpRequest.getResponseHeader("Content-Type"); 


} else if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
document .gettlementById("target").innerHTML 
- httpRequest.responseText; 


} 


</script> 
</body> 
</html> 


响应 标 头 在 readyState 变 成 HEADERS_RECEIVED ( 数值 为 2 ) 时 就 可 以 使 用 了 。 标 头 是 服务 器 在 
响应 时 首先 发 送 回 来 的 信息 ， 因 此 你 可 以 在 内 容 本 身 就 绪 前 先 读 取 它 们 。 在 这 个 例子 里 , 我 通过 
getResponseHeader 和 和 getAllResponseHeaders 方 法 获取 了 标 头 , 然后 将 某 一 个 标 头 (Content-Type ) 
和 其 他 所 有 标 头 的 值 分 别 设 为 两 个 div 元 素 的 内 容 。 从 图 32-5 可 以 看 到 结果 。 

根据 此 图 ， 你 可 以 看 到 我 的 开发 服务 咒 titan 正 在 运行 的 Web 服 务 器 软件 是 IIS 7.5 对 拥有 一 
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台 Windows Server 2008R2 服 务 器 并 从 事 大 量 .NET 开 发 工作 的 人 而 言 ， 这 是 可 以 预料 到 的 )， 而 我 
最 后 修改 apples.html 文 档 的 时 间 是 8 月 29 日 (但 屏幕 截图 是 9 月 1 日 )。 

= = 
© Example N oP 
€ > C Otitan/listings/example.htm wef 




















| Apples J | Cherries ] | Bananas | 
| [text/html 


Date: Thu, 01 Sep 2011 07:33:36 GMT X-Powered-By: ASP.NET Content-Length: 
1358 Last-Modified: Mon, 29 Aug 2011 18:18:33 GMT Server: Microsoft-IIS/7.5 











n 


ETag: "769beef7866cc1:0" Content-Type: text/html Accept-Ranges: bytes 





(1.2 to 2.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole with an 
acute tip, serrated margin and a slightly downy underside. Blossoms are 
.nroduced in snring simnltaneonsly with the budding of the leaves. The flowers are white — 


132-5 ” 读 取 响应 标 头 





The apple forms a tree that is small and deciduous, reaching 3 to 12 metres 
(9.8 to 39 ft) tall, with a broad, often densely twiggy crown. The leaves are — | 
alternately arranged simple ovals 5 to 12 cm long and 3 to 6 centimetres 











| 
s J 





32.5 生成 跨 源 Ajax 请 求 


默认 情况 下 ， 浏 览 器 限制 脚本 只 能 在 它们 所 属 文档 的 来 源 内 生成 Ajax 请 求 。 你 应 该 还 记得 ， 
来 源 由 URL 中 的 协议 、 主 机 名 和 端口 号 组 成 。 这 就 意味 着 当 我 从 http:/Wtitan 载 入 一 个 文档 后 , 文档 
内 含 的 脚本 通常 无 法 生成 对 http://titan:8080 的 请 求 ， 因 为 第 二 个 URL 的 端口 号 是 不 同 的 ， 所 以 处 


于 文档 来 源 之 外 。 从 一 个 来 源 到 男 一 个 来 源 的 Ajax 请 求 被 称 为 跨 源 请 求 ( cross-origin request )。 








提示 这 一 策略 的 目的 是 降低 跨 站 脚本 攻击 (cross-site scripting， 简 称 CSS ) 的 风险 ， 即 诱导 浏 
WE (或 用 户 ) 执行 恶意 脚本 。CSS 攻 击 不 属于 本 书 的 讨论 范围 ， 但 维基 百科 上 有 一 篇 
文章 很 好 地 介绍 了 这 个 主题 : http;//en.wikipedia.org/wiki/Cross-site scripting. 





这 个 策略 的 问题 在 于 它 一 刀 切 地 禁止 了 跨 源 请 求 。 这 就 导致 人 们 使 用 一 些 非 常 丑陋 的 手段 来 
诱 使 浏览 器 生成 违反 这 一 策略 的 请 求 。 

sf, 跨 源 资源 共享 ( Cross-Origin Resource Sharing, CORS ) 规范 提供 了 一 种 合法 的 方式 来 
生成 跨 源 请 求 。 





注意 ”这 个 高 级 主题 要 求 读者 拥有 一 些 HTTP 标 头 的 基本 知识 。 因 为 本 书 是 关于 HTML5 的 ， 所 
以 我 不 会 深入 谈 及 HTTP 的 细节 。 如 果 你 不 熟悉 HTTP， 建 议 你 跳 过 这 一 节 。 





作为 准备 ， 让 我 们 来 看 一 下 想 要 解决 的 问题 。 代 码 清 单 32-9 展 示 了 一 个 HTML 文 档 ， 它 包含 
的 脚本 会 尝试 生成 跨 源 请 求 。 
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代码 清单 32-9 ”尝试 生成 跨 源 请 求 的 脚本 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<div> 
<button>Apples</button> 
<button>Cherries</button> 
<button>Bananas</button> 
</div> 
<div id="target">Press a button</div> 
<script> 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 


var httpRequest; 


function handleButtonPress(e) ( 

httpRequest = new XMLHttpRequest(); 

httpRequest.onreadystatechange - handleResponse; 
httpRequest.open("GET", "http://titan:8080/" + e.target.innerHTML); 
httpRequest.send(); 





function handleResponse() { 
if (httpRequest.readyState == 4 8& httpRequest.status == 200) { 
document .gettlementById("target").innerHTML 
- httpRequest.responseText; 





} 
} 
</script> 
</body> 
</html> 











这 个 例子 中 的 脚本 扩展 了 用 户 所 按 按钮 的 内 容 ， 把 它 附 加 到 http:/titan:8080 上 ， 然 后 尝试 生 
成 一 个 Ajax 请 求 ( 如 http://titan:8080/Apples )。 我 会 从 http://titan/listings/example.html 载 入 此 文档 ， 














这 就 意味 着 脚本 正在 试图 生成 一 个 跨 源 请 求 。 
脚本 尝试 连接 的 服务 器 运行 的 是 Nodejs。 代 码 清单 32-10 展 示 了 代码 ， 我 把 它 保 存在 一 个 名 




















为 fruitselectorjs 的 文件 里 。( 获取 Node,js 的 细节 请 参见 第 2 章 。) 
代码 清单 32-10 ”Node.js 脚 本 : fruitselector.js 
var http = require('http'); 


http.createServer(function (req, res) { 
console. log("[200] " + req.method + " to 


+ req.url); 


res.writeHead(200, "OK", {"Content-Type": "text/html"]); 
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'«html»«head»«title»Fruit Total«/title»«/head»«body»'); 
<p>"); 

You selected ' + req.url.substring(1)); 
«/p»«/body»«/html»'); 


res.write 
res.write 
res.write 
res.write 
res.end(); 


p aM it 


)-listen(8080); 
这 是 一 个 非常 简单 的 服务 器 : 它 根据 客户 端 请 求 的 URL 生 成 一 小 段 HTML 文 档 。 举 例 来 说 ， 
如 果 客 户 端 请 求 了 http://titan:8080/Apples， 那 么 服务 器 就 会 生成 并 返回 下 列 HTML 文 档 : 


<html> 
<head> 
<title>Fruit Total</title> 
</head> 
<body> 
<p>You selected Apples</p> 
</body> 
</html> 


按照 现在 这 个 样子 ，example.html 里 的 脚本 无 法 从 服务 器 获取 它 想 要 的 数据 。 解 决 方法 是 为 
服务 器 返回 浏览 器 的 响应 信息 添加 一 个 标 头 ， 如 代码 清单 32-11 所 示 。 
代码 清单 32-11 添加 跨 源 标 头 


var http = require('http'); 








http.createServer(function (req, res) { 
console.log("[200] " + req.method + " to " + req.url); 


res.writeHead(200, "OK", { 
"Content-Type": "text/html", 
"Access-Control-Allow-Origin": "http://titan" 





35 
res.write('«html»«head»«title»Fruit Total«/title»«/head»«body»'); 
res.write('«p»'); 


res.write('You selected ' + req.url.substring(1)); 
res.write('«/p»«/body»«/html»'); 
res.end(); 

}). listen(8080) ; 


Access-Control-Allow-0rigin 标 头 指定 了 其 个 来 源 应 当 被 允许 对 此 文档 生成 跨 源 请 求 。 如 果 
标 头 里 指定 的 来 源 与 当前 文档 的 来 源 匹 配 ， 浏 览 器 就 会 加 载 和 处 理 该 响应 所 包含 的 数据 。 





提示 “支持 CORS 要 求 浏览 器 必须 在 联系 服务 器 和 获取 响应 标 头 之 后 应 用 跨 源 安全 策略 ， 这 就 意味 
着 即使 响应 因为 缺少 必要 的 标 头 或 指定 了 不 同 的 域 而 被 丢弃 ， 请 求 也 已 被 发 送 过 了 。 这 种 
方式 和 没有 实现 CORS 的 浏览 器 非常 不 同 ， 后 者 只 会 简单 地 阻挡 请 求 ， 不 会 去 联系 服务 器 。 


给 服务 器 响应 添加 这 个 标 头 之 后 ，example.html 文 档 中 的 脚本 就 能 够 请 求 和 接收 来 自 服务 器 
的 数据 了 ， 如 图 32-6 所 示 。 
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图 32-6 “启用 跨 源 Ajax 请 求 


32.5.1 使 用 Origin 请 求 标 头 


作为 CORS 的 一 部 分 ,浏览 器 会 给 请 求 添加 一 个 0rigin 标 头 以 注 明 当前 文档 的 来 源 。 可 以 通 
过 它 来 更 灵活 地 设置 Access-Control-Allow-0rigin 标 头 的 值 ， 如 代码 清单 32-12 所 示 。 


代码 清单 32-12 ”使 用 origin 请 求 标 头 


var http = require('http'); 

















http.createServer(function (req, res) { 
console. log("[200] " + req.method + " to " + req.url); 


res.statusCode = 200; 
res.setHeader("Content-Type", "text/html"); 


var origin = req.headers["origin"]; 
if (origin.indexOf("titan") > -1) { 
res.setHeader("Access-Control-Allow-Origin", origin); 


res.write('«html»«head»«title»Fruit Total«/title»«/head»«body»'); 
res.write('«p»'); 


res.write('You selected ' + req.url.substring(1)); 
res.write('«/p»«/body»«/html»'); 
res.end(); 


}).listen(8080) ; 
我 修改 了 服务 器 端的 脚本 ， 证 它 只 有 在 请 求 包含 origin 标 头 并 且 值 里 有 titan 时 才 设 置 
Access-Control-Allow-0rigin 响 应 标 头 。 这 是 一 种 非常 粗略 的 请 求 来 源 检查 方式 ， 但 你 可 以 根据 
具体 项 目的 上 下 文 环 境 来 调整 这 种 方式 ， 使 它 更 加 精确 。 








提示 还 可 以 把 Access-Control-Allow-0rigin 标 头 设 置 成 一 个 星 号 (* )， 意 思 是 允许 任意 来 源 
的 跨 源 请 求 。 使 用 这 个 设置 之 前 应 该 仔细 考虑 这 么 做 的 安全 隐患 。 
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32.5.2 ”高 级 CORS 功能 


CORS 规 范 定 义 了 许多 额外 的 标 头 ， 可 用 于 精细 化 控制 跨 域 请 求 ， 包 括 限制 请 求 能 够 使 用 的 
HTTP 方 法 。 这 些 高 级 功能 需要 进行 一 次 预先 请 求 (preflight request )， 即 浏览 器 先 向 服务 器 发 送 
一 个 请 求 来 确定 有 哪些 限制 ， 然 后 再 发 送 请 求 来 获取 数据 本 身 。 本 书 编写 过 程 中 , 这 些 高 级 功能 
尚未 被 可 靠 地 实现 。 
































32.6 ”中 止 请 求 


XMLHttpRequest 对 象 定义 了 一 个 让 你 可 以 中 止 请 求 的 方法 ， 如 表 32-6 所 示 。 


表 32-6 XMLHttpRequest 的 abort 方 法 
成 员 说 AA 返 回 
abort() 中 断 当 前 的 请 求 void 











为 了 演示 这 个 功能 ， 我 修改 了 fruitselector.js 这 段 Node.js 脚 本 来 引入 一 个 10 秒 延迟 ， 如 代码 清 
单 32-13 所 示 。 


代码 清单 32-13 ”在 服务 需 端 引入 一 段 延迟 
var http = require('http'); 


http.createServer(function (req, res) { 
console. log("[200] " + req.method + " to " + req.url); 





res.statusCode = 200; 
res.setHeader("Content-Type", "text/html"); 


setTimeout(function() { 
var origin - req.headers["origin"]; 
if (origin.indexOf("titan") > -1) { 
res.setHeader("Access-Control-Allow-Origin", origin); 


res .write('<html><head><title>Fruit Total«/title»«/head»«body»'); 
res.write('«p»'); 

res.write('You selected ' + req.url.substring(1)); 
res.write('«/p»«/body»«/html»'); 

res.end(); 

), 10000); 


})-listen(8080); 


当 服务 器 接收 到 一 个 请 求 后 ， 它 会 先 写 人 初始 的 响应 标 头 ， 暂 停 10 秒 钟 后 再 完成 整个 响应 。 
代码 清单 32-14 展 示 了 如 何在 浏览 器 上 使 用 XMLHttpRequest 的 中 止 功能 。 
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代码 清单 32-14 ”中止 请 求 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<div> 
<button>Apples</button> 
<button>Cherries</button> 
<button>Bananas</button> 
</div> 
<div> 
«button id-"abortbutton"»Abort«/button» 
«/div» 
«div id="target">Press a button</div> 
«script» 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 


} 
var httpRequest; 


function handleButtonPress(e) { 

if (e.target.id == "abortbutton") { 
httpRequest. abort(); 

} else { 
httpRequest = new XMLHttpRequest (); 
httpRequest.onreadystatechange = handleResponse; 
httpRequest.onabort = handleAbort; 
httpRequest.open("GET", "http://titan:8080/" + e.target.innerHTML) ; 
httpRequest.send(); 
document.getElementById("target").innerHTML = "Request Started"; 





} 


function handleResponse() { 
if (httpRequest.readyState == 4 8& httpRequest.status == 200) { 
document .gettlementById("target").innerHTML 
- httpRequest.responseText; 


} 


function handleAbort() { 
document .getElementById("target").innerHTML = "Request Aborted"; 
} 


</script> 
</body> 
</html> 


我 给 文档 添加 了 一 个 Abort (PIE) 按钮 ， 它 通过 调用 XMLHttpRequest 对 象 上 的 abort 方 法 来 
中 止 进行 中 的 请 求 。 因 为 我 在 服务 器 端 引 入 了 一 段 延迟 ， 所 以 有 充足 的 时 间 来 执行 它 。 
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XMLHttpRequest 通 过 abort 事 件 和 readystatechange 事 件 给 出 中 止 信号 。 在 这 个 例子 中 ， 我 响 
应 了 abort 事 件 ， 并 更 新 了 id 为 target 的 div 元 素 中 的 内 容 ， 以 此 标明 请 求 已 被 中 止 。 从 图 32-7 可 
以 看 到 它 的 效果 。 
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图 32-7 中止 一 个 请 求 


32.7 小 结 


本 章 通 过 XMLHttpRequest 对 和 象 向 你 介绍 了 Ajax。Ajax 让 你 可 以 在 后 台 生 成 请 求 ， 为 用 户 创 建 
更 平滑 的 体验 。 我 解释 了 XMLHttpRequest 对 象 如 何 通 过 一 系列 事件 给 出 某 个 请 求 的 进度 信号 ， 以 
及 你 可 以 如 何 探 测 和 处 理 不 同类 型 的 错误 , 还 有 如 何 设置 请 求 标 头 来 向 浏览 器 或 服务 器 指明 你 想 
要 执行 的 操作 类 型 。 作 为 一 个 更 高 级 的 主题 , 我 介绍 了 跨 源 请 求 规范 (CORS), 它 是 一 组 请 求 标 
头 ， 让 脚本 能 对 另 一 个 来 源 生成 Ajax 请 求 。 这 是 一 种 有 用 的 技巧 ， 只 是 你 需要 有 给 服务 器 响应 添 
加 标 头 的 能 力 。 
这 一 章 的 所 有 示例 都 是 关于 从 服务 器 取 回 数据 的 。 下 一 章 将 向 你 展示 如 何 发 送 数据 。 cami 


























使 用 Ajax 第 中 部 分 











在 这 一 章 里 , 我 将 继续 介绍 Ajax 的 工作 方式 ， 向 你 展示 如 何 向 客户 端 发 送 数 据 。 发 送 表 单 和 
文件 是 Ajax 的 两 个 常见 用 途 ， 它 们 能 让 Web 应 用 程序 创建 出 更 丰富 的 用 户 体验 。 我 还 会 向 你 展示 
如 何 监 视 向 服务 器 发 送 数 据 的 进度 ， 以 及 如 何 处 理 服务 器 响应 Ajax 请 求 时 传 回 的 不 同 响应 格式 。 
表 33-1 提 供 了 本 章 内 容 概要 。 前 三 份 代码 清单 建立 了 在 其 他 示例 中 使 用 的 服务 器 和 HTMIL 文 档 。 


表 33-1 本章 内 容 概要 












































































































































B 题 解决 方案 代码 清单 

向 服务 器 发 送 表 单数 据 jDOM 获 得 各 个 值 ， 然 后 以 URL 编 码 格式 连接 它们 33-4 

在 不 使 用 DOM 的 情况 下 编码 和 发 送 表单 数据 。 使 用 FormData 对 象 33-5 

发 送 额 外 的 表单 值 或 选择 性 发 送 表单 数据 使 用 FormData 对 象 上 的 append 方 法 33-6 

发 送 JSON 数 据 使 用 ]SON.stringify 方 法 ， 并 设置 请 求 的 内 容 类 型 为 33-7 
application/json 

向 服务 器 发 送 文 件 给 表单 添加 一 个 type 为 file 的 input 元 素 ， 并 使 用 33-8 
FormData 对 象 

跟踪 向 服务 器 上 传 数据 的 进度 使 用 XMLHttpRequestUpload 对 和 象 33-9 

从 服务 器 接收 HTML 片段 读 取 responseText 属 性 33-10、33-11 

覆盖 服务 器 发 送 的 MIME 类 型 使 用 overrideMimeType 方 法 33-12 

从 服务 器 接收 XML 使 用 responsexML 属 性 33-13、33-14 

从 服务 器 接收 JSON 数 据 使 用 ]SON.parse 方 法 33-15, 33-16 


33.1 准备 向 服务 器 发 送 数据 

Ajax 最 常见 的 一 大 用 途 是 向 服务 器 发 送 数 据 。 最 典型 的 情况 是 从 客户 端 发 送 表 单数 据 ,， 即 用 
户 在 form 元 素 所 含 的 各 个 input 元 素 里 输入 的 值 。 代 码 清单 33-1 展 示 了 一 张 简单 的 表单 , 它 将 会 成 
为 本 章 这 一 部 分 的 基础 。 我 把 这 段 HTML 保 存在 一 个 名 为 example.html 的 文件 里 。 
代码 清单 33-1 基本 表单 


<!DOCTYPE HTML> 
<html> 
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<head> 
<title>Example</title> 
<style> 
.table {display: table; } 
.row {display:table-row; } 
.cell (display: table-cell; padding: 5px; } 
.label (text-align: right; } 
</style> 
</head> 
<body> 
<form id="fruitform" method="post" action="http://titan:8080/form" > 
<div class="table"> 
<div class="row"> 
<div class="cell label">Bananas:</div> 
<div class="cell"><input name="bananas" value="2"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Apples:</div> 
<div class="cell"><input name="apples" value="5"/></div> 
</div> 
<div class="row"> 
<div class-"cell label">Cherries:</div> 
<div class="cell"><input name="cherries" value="20"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Total:</div> 
<div id="results" class="cell">0 items</div> 
</div> 
</div> 
«button id="submit" type-"submit"»Submit Form</button> 
</form> 
</body> 
</html> 


这 个 例子 中 的 表单 包含 三 个 input 元 素 和 一 个 提交 button。 这 些 input 元 素 让 用 户 可 以 指定 三 
种 不 同 种 类 的 水 果 各 自 要 订购 多 少 ，button 则 会 将 表单 提交 给 服务 器 。 要 了 人 解 这 些 元 素 的 更 多 信 
息 ， 请 参见 第 12 章 、 第 13 章 和 第 14 章 。 









































33.1.1 定义 服务 器 


我 们 需要 为 这 些 示 例 创建 处 理 请 求 的 服务 器 。 我 再 一 次 使 用 了 Nodejs, 原因 主要 是 它 很 简单 ， 
而 且 用 的 是 JavaScript。 关 于 如 何 获取 Node.js 的 细节 请 参见 第 2 章 。 我 不 会 深入 讨论 这 段 脚 本 的 工 
作 方 式 , 但 它 是 用 JavaScript 编 写 的 ， 所 以 你 应 该 能 了 解 这 段 脚本 的 大 致意 思 。 话 虽 如 此 ,能 否 理 
解 服务 器 脚本 对 于 理解 Ajax 而 言 并 不 关键 ， 如 果 你 愿意 ， 可 以 直接 将 服务 器 作为 一 个 黑 盒 对 待 。 
代码 清单 33-2 展 示 了 fruitcalc.js 里 的 脚本 。 


代码 清单 33-2 ”用 于 Nodejs 的 fruitcalc.js 脚 本 


var http = require('http'); 
var querystring = require('querystring'); 
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var multipart = require('multipart'); 


function writeResponse(res, data) { 
var total = 0; 
for (fruit in data) { 
total += Number(data[fruit]); 


res.writeHead(200, "OK", { 

"Content-Type": "text/html", 

"Access-Control-Allow-Origin": "http://titan"}); 
res.write('«html»«head»«title»Fruit Total</title></head><body>'); 
res.write('«p»' + total + ' items ordered«/p»«/body»«/html»'); 
res.end(); 


) 


http.createServer(function (req, res) { 
console.log("[200] " + req.method + 
if (req.method == 'OPTIONS') { 
res.writeHead(200, "OK", { 
"Access-Control-Allow-Headers": "Content-Type", 
"Access-Control-Allow-Methods": "*", 
"Access-Control-Allow-Origin": "*" 
H); 
res.end(); 
} else if (req.url == '/form' && req.method == 'POST') { 
var dataObj = new Object(); 
var contentType - req.headers["content-type"]; 
var fullBody - ''; 


to " + req.url); 


if (contentType) { 
if (contentType.indexOf("application/x-www-form-urlencoded") » -1) ( 


req.on('data', function(chunk) { fullBody += chunk.toString();]); 
req.on('end', function() { 

var dBody - querystring.parse(fullBody); 

dataObj.bananas = dBody["bananas"]; 

dataObj.apples = dBody["apples"]; 

dataObj.cherries- dBody["cherries"]; 

writeResponse(res, dataObj); 





T5 


} else if (contentType.indexOf("application/json") > -1) { 
req.on('data', function(chunk) { fullBody += chunk.toString();]); 
req.on('end', function() { 

data0bj = JSON.parse(fullBody); 
writeResponse(res, dataObj); 


5 


} else if (contentType.indexOf("multipart/form-data") > -1) { 
var partName; 
var partType; 
var parser = new multipart.parser(); 
parser.boundary = "--" + req.headers["content-type"].substring(30) ; 











parser.onpartbegin = function(part) { 
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partName = part.name; partType = part.contentType}; 
parser.ondata = function(data) { 
if (partName != "file") { 
dataObj[partName] = data; 


h 
req.on('data', function(chunk) { parser.write(chunk);]); 
req.on('end', function() { writeResponse(res, dataObj);}); 
} 
} 


io aegis 

我 将 脚本 中 需要 加 以 注意 的 那 一 部 分 进行 了 加 粗 : writeResponse 函 数 。 这 个 函数 会 在 提取 
请 求 的 表单 值 之 后 调用 ， 它 负责 生成 对 浏览 器 的 响应 。 当 前 ， 这 个 函数 会 创建 简单 的 HTML 文 档 
( 如 代码 清单 33-3 所 展示 的 )， 但 我 们 会 在 本 章 后 面 处 理 不 同 格式 时 修改 并 增强 这 个 函数 。 


代码 清单 33-3 ”writeResponse 函 数 生成 的 简单 HTMIL 文 档 


<html> 
<head> 
<title>Fruit Total</title> 
</head> 
<body> 
<p>27 items ordered</p> 
</body> 
</html> 


这 个 响应 很 简单 ,但 它 是 一 个 不 错 的 开始 。 它 实现 的 效果 是 让 服务 器 计算 出 了 用 户 通过 fornm 
中 各 个 input 元 素 所 订购 的 水 果 总 数 。 服 务 器 端 脚本 的 其 余部 分 负责 解码 客户 端 用 Ajax 发 送 的 各 
种 可 能 的 数据 格式 。 可 以 像 这 样 启动 服务 器 程序 : 

















bin\node.exe fruitcalc.js 











这 段 脚 本 的 目标 使 用 范围 仅 限 于 这 一 章 。 它 不 是 一 种 通用 的 服务 器 , 我 也 不 建议 你 将 它 的 任 
何 部 分 用 于 生产 服务 。 本 童 后 续 的 示例 绑 定 了 许多 假定 和 便捷 做 法 , 其 脚本 也 不 适合 用 于 任何 正 
式 的 用 途 。 


33.1.2 ”理解 问题 所 在 


图 33-1 清 楚 地 描述 了 我 想 要 用 Ajax 解 决 的 问题 。 

当 你 提交 表单 后 ， 浏 览 器 会 在 新 的 页 面 显示 结果 。 这 意味 着 两 点 : 

口 用 户 必 须 等待 服 务 右 处 理 数据 并 生成 响应 ; 

a 所 有 文档 上 下 文 信息 都 丢失 了 ， 因 为 结果 是 作为 新 文档 进行 显示 的 。 

这 就 是 应 用 Ajax 的 理想 情形 了 。 可 以 异步 生成 请 求 , 这样 用 户 就 能 在 表单 被 处 理 时 继续 与 文 
档 进行 交互 。 
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图 33-1 ”提交 一 张 简单 的 表单 














33.2 ”发送 表单 数据 


向 服务 器 发 送 数据 的 最 基本 方式 是 自己 收集 并 格式 化 它 。 代 码 清单 33-4 展 示 了 添加 到 
example.html 的 一 段 脚本 ， 它 用 的 就 是 这 种 方式 。 


代码 清单 33-4 手动 收集 和 发 送 数据 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<style> 
.table {display: table; } 
.row {display:table-row; } 
.cell (display: table-cell; padding: 5px; } 
.label (text-align: right; } 
</style> 
</head> 
<body> 


«form id="fruitform" method="post" action-"http://titan:8080/form"» 
<div class="table"> 
<div class="row"> 
<div class="cell label">Bananas:</div> 
<div class="cell"><input name="bananas" value="2"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Apples:</div> 
<div class="cell"><input name="apples" value="5"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Cherries:</div> 
<div class="cell"><input name="cherries" value="20"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Total:</div> 
«div id-"results" class="cell">0 items</div> 
</div> 
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</div> 
«button id="submit" type-"submit"»Submit Form</button> 
</form> 
<script> 
document.getElementById("submit").onclick = handleButtonPress; 


var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form - document.getElementById("fruitform"); 
var formData - ""; 
var inputElements = document.getElementsByTagName ("input"); 
for (var i = 0; i « inputElements.length; i++) ( 
formData += inputElements[i].name + "=" 
+ inputElements[i].value + "&"; 


} 


httpRequest = new XMLHttpRequest() ; 
httpRequest.onreadystatechange - handleResponse; 
httpRequest.open("POST", form.action); 
httpRequest.setRequestHeader('Content-Type', 
'application/x-www-form-urlencoded'); 
httpRequest.send(formData); 
) 


function handleResponse() ( 

if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
document.getElementById("results").innerHTML 
- httpRequest.responseText; 

) 

) 

</script> 
</body> 
</html> 


这 段 脚 本 看 上 去 比 实际 情况 更 复杂 一 些 。 为 了 更 好 地 加 以 解释 , 我 会 把 它 分 成 独立 的 步骤 。 所 
有 的 动作 都 发 生 在 handleButtonPress 函 数 里 ， 脚 本 会 调用 这 个 函数 来 响应 button 元 素 的 点 击 事件 。 

我 所 做 的 第 一 件 事 是 调用 Event 对 象 ( 由 浏览 器 指派 给 此 函数 ) 上 的 preventDefault 方 法 。 第 
30 章 介绍 过 这 个 方法 , 解释 了 有 些 事件 带 有 关联 的 默认 行为 。 对 表单 里 的 button 元 素 而 言 ， 其 默 
认 行 为 是 用 常规 的 非 Ajax 方 式 提交 表单 。 我 不 想 让 它 发 生 ， 所 以 调用 了 preventDefault 方 法 。 





















































提示 我 喜欢 在 事件 处 理 函 数 的 开头 调用 preventDefault 方 法 , 因为 这 能 让 调试 变 得 更 容易 。 如 
果 我 在 函数 的 最 后 调用 这 个 方法 ， 脚 本 里 任何 未 捕捉 到 的 错误 都 会 导致 执行 终止 并 启动 
默认 行为 。 这 一 切 发 生得 如 此 之 快 ， 你 可 能 完全 无 法 在 浏览 器 的 脚本 控制 台中 看 到 错误 
细节 。 
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下 一 步 是 收集 并 格式 化 各 个 input 元 素 的 值 ， 就 像 这 样 ; 
var formData = ""; 
var inputElements = document.getElementsByTagName("input"); 
for (var i = 0; i < inputElements.length; i++) { 
formData += inputElements[i].name + "=" + inputElements[i].value + "&"; 
} 


我 用 DOM 获 取 了 input 元 素 的 集合 ， 然 后 创建 了 一 个 字符 串 ， 内 含 各 个 元 素 的 name 和 value 
属性 。name 和 value 之 间 用 等 号 (=) 分隔， 各 个 input 元 素 之 间 则 用 8 符号 分 隔 。 结 果 看 上 去 就 像 
这 样 : 

bananas-28apples-58cherries-208 

如 果 回 顾 第 12 章 ， 你 会 看 到 这 是 编码 表单 数据 的 默认 方式 ， 即 application/x-www- 
form-urlencoded 编 码 。 虽 然 它 是 form 元 素 使 用 的 默认 编码 ,但 却 不 是 Ajax 的 默认 编码 ， 因 此 我 需 
要 添加 一 个 标 头 来 告诉 服务 器 准备 接收 哪 一 种 数据 格式 ， 就 像 这 样 : 

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 

脚本 的 其 余部 分 是 常规 的 Ajax 请 求 ， 它 们 和 前 一 章 里 的 很 相似 ， 但 有 几 处 不 同 。 

首先 ， 我 在 调用 XMLHttpRequest 对 象 上 的 open 方 法 时 用 了 HTTP 的 P05T 方 法 。 这 是 一 条 原则 : 
数据 必须 通过 P05T 方 法 发 送 给 服务 器 ， 而 不 是 6ET 方 法 。 通 过 读 取 HTMLFormElement 的 action 属 性 
获得 了 请 求 需要 发 送 的 URL: 

httpRequest.open("POST", form.action); 

form 的 行为 会 产生 一 个 跨 域 请 求 , 我 用 前 一 章 介 绍 的 CORS 技 巧 在 服务 器 端 对 它 进行 了 处 理 。 

第 二 点 值得 注意 的 是 我 把 想 要 发 送 给 服务 器 的 字符 串 作为 参数 传递 给 send 方 法 ， 就 像 这 样 : 

httpRequest.send(formData) ; 

当 得 到 服务 器 返回 的 响应 信息 时 ,我 用 DOM 给 id 为 results 的 div 元 素 设置 了 内 容 。 从 图 33-2 
可 以 看 到 它 的 效果 。 
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Ses Ss Se) 
€ > C © titan/listings/example.htr BY eample e 
€ > C |Otitan/listings/example.htm wow 
Bananas: 2 
Apples: 5 B 3: 
Cherries: 20 ee 6 





Total: 0 item Meryies: 20 


Total: 27 items ordered 


e — | [Submit Form 
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服务 器 响应 表单 提交 后 返回 的 HTML 文 档 会 显示 在 同一 页 上 ， 而 且 该 请 求 是 异步 执行 的 。 
样 做 的 效果 比 刚 开 始 要 好 多 了 。 


33.3 ”使 用 Formata 对 象 发 送 表 单数 据 


另 一 种 更 简洁 的 表单 数据 收集 方式 是 使 用 一 个 FormData 对 象 ， 它 是 在 XMLHttpRequest 的 第 二 
级 规范 中 定义 的 。 























注意 ”在 编写 本 书 过 程 中 ，Chrome、Safari 和 Firefox 浏 览 器 已 经 支持 FormData 对 象 了 ， 但 Opera 
和 Internet Explorer 还 不 支持 "。 


33.3.1 创建 FormData WR 


创建 FormData 对 象 时 可 以 传递 一 个 HTMLFormElement 对 象 (在 第 31 音 介绍 过 )， 这 样 表单 里 所 
有 元 素 的 值 都 会 被 自动 收集 起 来 ,代码 清单 33-5 提 供 了 一 个 示例 。 此 代码 清单 只 展示 了 脚本 部 分 ， 
因为 HTML 部 分 没有 变化 。 


代码 清单 33-5 ”使 用 FormData 对 象 





<script> 
document. getElementById("submit").onclick = handleButtonPress; 
var httpRequest; 


function handleButtonPress(e 
e.preventDefault(); 


— 
一 





var form = document.getElementById("fruitform"); 
var formData = new FormData(form); 


ttpRequest - new XMLHttpRequest(); 
ttpRequest.onreadystatechange - handleResponse; 
ttpRequest.open("POST", form.action); 
ttpRequest.send(formData); 





E E cub. ui. 


} 


function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
document .getElementById("results").innerHTML 
- httpRequest.responseText; 





} 
} 


</script> 








(D Opera 12 和 Internet Explorer 10 已 经 开始 支持 FormData 对 象 了 。 一 一 译 者 注 
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当然 ， 关 键 的 变化 是 使 用 了 FormData 对 象 

var formData = new FormData(form) ; 

其 他 需要 注意 的 地 方 是 我 不 再 设置 Content-Type 标 头 的 值 了 。 如 果 使 用 FormData 对 象 ， 数 据 
总 是 会 被 编码 为 multipart/form-data( 第 12 章 介绍 过 )。 











33.3.2 ”修改 FormData WR 


FormData 对 象 定 义 了 一 个 方法 ， 它 允许 你 给 要 发 送 到 服务 器 的 数据 添加 名 称 / 值 对 。 表 33-2 介 
绍 了 这 个 方法 。 





表 33-2 ”XMLHttpRequest 对 象 中 与 标 头 有 关 的 方法 





AOR 说 — Hj ik E 
append(«name», «value») 给 数据 集 附加 名 称 和 值 void 








可 以 用 append 方 法 增补 从 表单 中 收集 的 数据 , 也 可 以 在 不 使 用 HTMLFormElement 的 情况 下 创建 
FormData 对 象 。 这 就 意味 着 可 以 使 用 append 方 法 来 选择 向 客户 端 发 送 哪些 数据 值 。 代 码 清单 33-6 
对 此 进行 了 演示 。 我 又 一 次 只 展示 了 脚本 元 素 ， 因 为 其 他 的 HTML 元 素 没有 变化 。 


代码 清单 33-6 ”用 FormpData 对 象 选择 性 发 送 数据 到 服务 器 











<script> 
document. getElementById("submit").onclick = handleButtonPress; 
var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form = document.getElementById("fruitform") ; 


var formData = new FormData(); 
var inputElements = document.getElementsByTagName("input") ; 
for (var i = 0; i < inputElements.length; i++) { 
if (inputElements[i].name != "cherries") { 
formData.append(inputElements[i].name, inputElements[i].value) ; 


} 


ttpRequest = new XMLHttpRequest(); 
ttpRequest.onreadystatechange = handleResponse; 
ttpRequest.open("POST", form.action); 
ttpRequest.send(formData); 


function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
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document .getElementById("results").innerHTML 
- httpRequest.responseText; 
} 
} 


</script> 


在 这 段 脚本 里 ， 我 创建 FormData 对 象 时 并 没有 提供 HTMLFormElement 对 象 。 随 后 我 用 DOM 找 
到 文档 里 所 有 的 input 元 素 , 并 为 那些 name 属 性 的 值 不 是 cherries 的 元 素 添加 名 称 / 值 对 。 从 图 33.3 
可 以 看 到 它 的 效果 ， 其 中 服务 器 返回 的 总 数值 不 包括 用 户 提供 的 cherries 数 值 。 
| CEES 
E Example 
€ > C Otitan/listings/example.htn $4 


























Bananas: 2 
Apples: 5 


Cherries: 20 


Total: 7 items ordered 


Submit Form J 





s 








133-3 ”用 FormData 对 象 选择 性 发 送 数 据 


33.4 发 送 JSON 数据 


Ajax 不 止 用 来 发 送 表单 数据 , 几乎 可 以 发 送 任何 东西 , 包括 JavaScript 对 象 表示 法 ( JavaScript 
Object Notation, JSON ) 数据 ， 而 它 已 经 成 为 一 种 流行 的 数据 格式 了 。Ajax 扎 根 于 XML， 但 这 一 
格式 很 繁 玉 。 当 你 运行 的 Web 应 用 程序 必须 传输 大 量 XML 文 档 时 ,繁琐 就 意味 着 带宽 和 系统 容量 
方面 的 实际 成 本 。 

JSON 经 常 被 称 为 XML 的 “脱脂 ”替代 品 。JSON 易 于 阅读 和 编写 ， 比 XML 更 紧凑 ， 而 且 已 
经 获得 了 令 人 难以 置信 的 广泛 支持 。JSON 发 源 于 JavaScript， 但 它 的 发 展 已 经 超越 了 JavaScript， 
被 无 数 的 程序 包 和 系统 理解 并 使 用 。 

以 下 是 一 个 简单 的 JavaScript 对 象 用 JSON 表 达 的 样子 ， 

{"bananas":"2","apples":"5","cherries":"20"} 

这 个 对 象 有 三 个 属性 : bananas 、apples 和 cherries。 这 些 属性 的 值 分 别 是 >-、5 和 20。 

JSON 的 功能 不 如 XML 丰富 ,但 对 许多 应 用 程序 来 说 ,那些 功能 是 用 不 到 的 。JSON 简 单 、 轻 

量 和 富有 表现 力 。 代 码 清单 33-7 演 示 了 发 送 JSON 数 据 到 服务 器 有 多 简单 。 


代码 清单 33-7 ”发送 JSON 数 据 到 服务 器 












































<script> 
document. getElementById("submit").onclick = handleButtonPress; 
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var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form = document.getElementById("fruitform"); 


var formData = new Object(); 

var inputElements = document.getElementsByTagName("input") ; 

for (var i = 0; i « inputElements.length; i++) { 
formData[inputElements[i].name] = inputElements[i].value; 


} 


httpRequest = new XMLHttpRequest (); 
httpRequest.onreadystatechange = handleResponse; 
httpRequest.open("POST", form.action) ; 
httpRequest. setRequestHeader("Content-Type", "application/json"); 
httpRequest. send(JSON. stringify(formData) ) ; 

} 


function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
document.getElementById("results").innerHTML 
= httpRequest.responseText; 
} 
} 


</script> 











在 这 段 脚本 里 ， 我 创建 了 一 个 新 的 0bject， 并 定义 了 一 些 属性 来 对 应 表单 内 各 个 input 元 素 
的 name 属 性 值 。 我 可 以 使 用 任何 数据 ， 但 input 元 素 很 方便 ， 而 且 能 和 之 前 的 例子 保持 一 致 。 

为 了 告诉 服务 器 我 正在 发 送 JSON 数 据 ， 把 请 求 的 Content-Type 标 头 设 为 application/json， 
就 像 这 样 : 

httpRequest.setRequestHeader("Content-Type", "application/json"); 

FH3s0NXJ 4 5JSONTE S UECTHECEL R (KA BON V iR Be BSR POR, 但 你 也 可 以 
用 下 面 网 址 里 的 脚本 来 给 旧版 浏览 器 添加 同样 的 功能 : https://github.com/douglascrockford/ 
JSON-js/blob/master/json2.js。) JSON 对 象 提供 了 两 个 方法 ， 如 表 33-3 所 示 。 
































表 33-3 ”JSON 对 象 定义 的 方法 


























方 法 说 — Hj i& E 
parse(<json>) 解析 用 JSON 编 码 的 字符 串 并 创建 一 个 对 象 对 象 
stringify(<object>) 为 指定 对 象 创建 用 JSON 编 码 的 数据 表示 FAT 





























在 代码 清单 33-7 里 ， 我 使 用 了 stringify 方 法 ， 然 后 把 结果 传递 给 XMLHttpRequest 对 象 的 send 
方法 。 这 个 例子 中 只 有 数据 的 编码 方式 发 生 了 变化 。 提 交 文档 表单 的 效果 还 是 一 样 的 。 




















33.5 发送 文件 705 





33.5 ”发 送 文件 


可 以 使 用 FormData 对 象 和 type 属 性 为 file 的 input 元 素 向 服务 器 发 送 文 件 。 当 表单 提交 时 ， 
FormData 对 象 会 自动 确保 用 户 选择 的 文件 内 容 与 其 他 的 表单 值 一 同上 传 。 代 码 清 单 33-8 展 示 了 如 
何以 这 种 方式 使 用 FormData 对 象 。 


注意 在 尚未 支持 FormData 对 象 的 浏览 器 里 用 Ajax 上 传 文件 是 有 难度 的 .当前 有 许多 修补 和 变通 
方法 可 供 使 用 : 其 中 一 些 利 用 了 Flash， 另 一 些 则 有 着 复杂 的 程序 ， 需 要 提交 表单 到 隐藏 
的 jframe 元 素 里 。 它 们 都 带 有 严重 的 缺陷 ， 应 该 谨慎 使 用 。 


代码 清单 33-8 ”使 用 FormData 对 象 发 送 文 件 到 服务 器 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
.table {display: table; } 
.row {display:table-row; } 
.cell (display: table-cell; padding: 5px; } 
.label (text-align: right; } 
</style> 
</head> 
<body> 
«form id="fruitform" method="post" action-"http://titan:8080/form"» 
<div class="table"> 
<div class="row"> 
<div class="cell label">Bananas:</div> 
<div class="cell"><input name="bananas" value="2"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Apples:</div> 
<div class="cell"><input name="apples" value="5"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Cherries:</div> 
<div class="cell"><input name="cherries" value="20"/></div> 
</div> 
<div class="row"> 
<div class="cell label">File:</div> 
«div class="cell"><input type="file" name="file"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Total:</div> 
«div id="results" class="cell">0 items</div> 
</div> 
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</div> 
<button id="submit" type="submit">Submit Form</button> 
</form> 
<script> 
document. getElementById("submit").onclick = handleButtonPress; 


var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form = document.getElementById("fruitform"); 


var formData = new FormData(form) ; 

httpRequest = new XMLHttpRequest (); 
httpRequest.onreadystatechange = handleResponse; 
httpRequest.open("POST", form.action) ; 
httpRequest.send(formData); 


} 


function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
document .getElementById("results").innerHTML 
- httpRequest.responseText; 


} 
} 
</script> 
</body> 
</html> 


在 这 个 例子 里 , 最 明显 的 变化 发 生 在 form 元 素 身上 。 添加 了 input 元 素 后 ，FormData 对 象 就 会 
上 传 用 户 所 选 的 任意 文件 。 从 图 33-4 可 以 看 到 添加 后 的 效果 。 


Te 回 ESI ` 
ce 
/ By Example Wes 

















Bananas: 2 
Apples: 5 
Cherries: 20 
File: cherries.png 
Total: 0 items 


x -3 | 


图 33-4 ”添加 一 个 input 元 素 ， 使 文件 通过 FormData 对 象 上 传 
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提示 “第 37 章 会 向 你 展示 如 何 使 用 拖 放 API， 让 用 户 能 够 从 操作 系统 拖 入 要 上 传 的 文件 ， 而 不 是 
使 用 文件 选择 器 。 


33.6 ”追踪 上 传 进度 


可 以 在 数据 发 送 到 服务 器 时 追踪 它 的 进度 。 具 体 的 做 法 是 使 用 XMLHttpRequest 对 象 的 upload 
性 ， 如 表 33-4 所 示 。 











三 
Pam) 


表 33-4 upload 属性 





























名 mm 说 — HH ik E 
upload 返回 一 个 可 用 于 监控 进度 的 对 象 XMLHttpRequestUpload 





upload 属 性 返回 的 XMLHttpRequestUp1oad 对 象 只 定义 了 注册 事件 处 理 咒 所 需 的 属性 ， 这 些 事 
件 在 前 一 章 介 绍 过 : onprogress、onload 等 。 代 码 清单 33-9 展 示 了 如 何 用 这 些 事件 来 向 用 户 显 示 
上 传 进度 。 


代码 清单 33-9 监控 并 显示 上 传 进度 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
.table {display: table; } 
.row {display:table-row; } 
.cell (display: table-cell; padding: 5px; } 
.label {text-align: right; } 
</style> 
</head> 
<body> 
«form id="fruitform" method="post" action-"http://titan:8080/form"» 
<div class="table"> 
<div class="row"> 
<div class="cell label">Bananas:</div> 
<div class="cell"><input name="bananas" value="2"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Apples:</div> 
<div class="cell"><input name="apples" value="5"/></div> 
</div> 
<div class="row"> 
<div class-"cell label">Cherries:</div> 
<div class="cell"><input name="cherries" value="20"/></div> 
</div> 
<div class="row"> 
<div class="cell label">File:</div> 
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<div class="cell"><input type="file" name="file"/></div> 
</div> 
<div class="row"> 

<div class="cell label">Progress:</div> 

<div class="cell"><progress id="prog" value="0"/></div> 
</div> 
<div class="row"> 

<div class="cell label">Total:</div> 

«div id-"results" class="cell">0 items</div> 
</div> 


</div> 
<button id="submit" type="submit">Submit Form</button> 
</form> 
<script> 
document.getElementById("submit").onclick = handleButtonPress; 
var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form = document.getElementById("fruitform"); 
var progress = document.getElementById("prog"); 


var formData = new FormData(form) ; 
httpRequest = new XMLHttpRequest (); 


var upload = httpRequest.upload; 


upload.onprogress = function(e) { 
progress.max = e.total; 
progress.value = e.loaded; 


upload.onload = function(e) { 
progress.value = 1; 
progress.max = 1; 


} 


httpRequest.onreadystatechange = handleResponse; 
httpRequest.open("POST", form.action) ; 
httpRequest.send(formData); 

} 


function handleResponse() { 

if (httpRequest.readyState == 4 8& httpRequest.status == 200) { 
document .getElementById("results").innerHTML 
- httpRequest.responseText; 

} 

} 

</script> 
</body> 
</html> 


33.7 请 求 并 处 理 不 同 内 容 类 型 709 








在 这 个 例子 中 ， 我 添加 了 一 个 progress 元 素 (在 第 15 章 介绍 过 )， 然 后 用 它 向 用 户 提 供 数据 
上 传 进度 信息 。 通 过 读 取 XMLHttpRequest .upload 属 性 获得 了 一 个 XMLHttpRequestUupload 对 象 ， 并 
注册 了 一 些 函 数 以 啊 应 progress 和 1oad 事 件 。 

浏览 器 不 会 给 出 小 数据 量 传输 的 进度 信息 ， 因 此 测试 这 个 例子 的 最 佳 方式 是 选择 一 个 大 文 
件 。 图 33-5 展 示 了 把 一 个 电影 文件 发 送 到 服务 器 的 过 程 。 
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图 33-5 ”在 数据 上 传 到 服务 器 过 程 中 显示 进度 





33.7 ”请 求 并 处 理 不 同 内 容 类 型 


到 目前 为 止 , 所 有 Ajax 示 例 返 回 的 都 是 一 个 完整 的 HTML 文 档 , 里面 包含 了 head、title 和 body 
元 素 。 这 些 元 素 都 是 多 余 的 信息 ,考虑 到 实际 从 服务 器 上 传输 过 来 的 数据 其 实 很 少 ， 有 用 信息 和 
无 用 信息 的 比率 并 不 理想 。 

幸好 ， 你 不 必 返 回 完 整 的 HTML 文档 。 事 实 上 ， 根 本 无 需 返 回 HTML。 接 下 来 的 几 节 会 向 你 
展示 如 何 处 理 不 同类 型 的 数据 ， 以 及 如 何在 这 么 做 的 同时 降低 Ajax 请 求 带 来 的 多 余 的 数据 量 。 
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33.7.1 接收 HTML 片段 


最 简单 的 改变 是 让 服务 器 返回 一 个 HTML 片 段 ， 而 不 是 整个 文档 。 要 做 到 这 一 点 ， 首 先 需 要 
修改 Node,js 服 务 器 脚本 里 的 writeResponse 函 数 ， 如 代码 清单 33-10 所 示 。 


代码 清单 33-10 ”修改 服务 器 以 发 回 HTML 片段 


function writeResponse(res, data) { 

var total = 0; 

for (fruit in data) { 
total += Number(data[fruit]); 

} 

res.writeHead(200, "OK", { 
"Content-Type": "text/html", 
"Access-Control-Allow-Origin": "http://titan"}); 
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res.write('You ordered <b>' + total + '«/b» items'); 
res.end(); 


相对 于 形式 完整 的 文档 , 现在 的 服务 器 只 会 发 送 一 小 段 HTML。 代码 清单 33-11 展 示 了 客户 端 
的 HTML 文档 。 


代码 清单 33-11 使 用 HTML 片段 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<style> 
.table {display: table; } 
.row {display:table-row; } 
.cell (display: table-cell; padding: 5px; } 
.label (text-align: right; } 
</style> 
</head> 
<body> 


<form id="fruitform" method="post" action-"http://titan:8080/form"» 
<div class="table"> 
<div class="row"> 
<div class="cell label">Bananas:</div> 
<div class="cell"><input name="bananas" value="2"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Apples:</div> 
<div class="cell"><input name="apples" value="5"/></div> 
</div> 
<div class="row"> 
<div class-"cell label">Cherries: </div> 
<div class="cell"><input name="cherries" value="20"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Total:</div> 
«div id-"results" class="cell">0 items</div> 
</div> 
</div> 
<button id="submit" type="submit">Submit Form</button> 
</form> 
<script> 
document. getElementById("submit").onclick = handleButtonPress; 

















var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form = document.getElementById("fruitform"); 


var formData = new Object(); 
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var inputElements = document.getElementsByTagName("input"); 
for (var i = 0; i < inputElements.length; i++) { 
formData[inputElements[i].name] = inputElements[i].value; 


httpRequest = new XMLHttpRequest (); 

httpRequest .onreadystatechange = handleResponse; 
httpRequest.open("POST", form.action) ; 
httpRequest.setRequestHeader("Content-Type", "application/json"); 
httpRequest.send(JSON.stringify(formData)); 





function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
document .getElementById("results").innerHTML 


- httpRequest.responseText; 











} 
} 
</script> 


</body> 
</html> 


我 移 除 了 一 些 最 近 添 加 的 文件 上 传 和 进度 监控 代码 。 将 数据 以 JSON 格 式 发 送 给 服务 右 ， 然 
后 接收 一 个 HTML 片段 作 为 回应 ( 但 我 用 来 向 服务 器 发 送 数据 的 格式 和 从 服务 器 上 收 到 的 数据 格 
式 之 间 并 无 关联 )。 

我 有 服务 占 的 控制 权 , 于 是 我 确保 Content-Type 标 头 被 设置 成 text/html, 以 此 告诉 浏览 右 它 
处 理 的 是 HTML ( 尽管 它 获得 的 数据 不 以 DOCTYPE 或 html 元 素 开头 )。 如 果 想 覆盖 Content-Type 标 
头 并 自己 指定 数据 类 型 ， 可 以 使 用 overrideMimeType 方 法 ， 如 代码 清单 33-12 所 示 。 


代码 清单 33-12 ”覆盖 数据 类 型 


<script> 
document. getElementById("submit").onclick = handleButtonPress; 











var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form = document.getElementById("fruitform"); 


var formData - new Object(); 

var inputElements - document.getElementsByTagName(" input"); 

for (var i = 0; i « inputElements.length; i++) { 
formData[inputElements[i].name] = inputElements[i].value; 

} 


httpRequest = new XMLHttpRequest(); 
httpRequest.onreadystatechange = handleResponse; 
httpRequest.open("POST", form.action) ; 

httpRequest. setRequestHeader("Content-Type", "application/json"); 
httpRequest.send(JSON. stringify(formData)); 
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function handleResponse() { 


if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
httpRequest. overrideMimeType("text/html") ; 
document .getElementById("results").innerHTML 


- httpRequest.responseText; 
} 
} 


</script> 





如 果 服 务 器 归 类 数据 的 方式 不 是 你 想 要 的 , 指定 数据 类 型 就 很 有 用 了 。 在 你 想 传输 来 自 文件 


的 内 容 片段 , 但 服务 器 预先 定义 了 应 当 如 何 设置 C 
33.7.2 ”接收 XML 数据 





XML 在 Web 应 用 程序 里 的 流行 程度 已 今 非 背 上 





ontent-Type 标 头 的 时 候 , 最 容易 出 现 这 种 情况 。 


上 ， 大 多 数 情况 下 都 被 JSON 所 取代 。 话 虽 如 此 ， 





处 理 XML 数 据 的 能 力 仍然 可 以 派 上 用 场 ， 特 别 是 在 处 理 旧 数 据 源 的 时 候 。 代 码 清单 33-13 展 示 了 


Ve Be 


向 浏览 器 发 送 XML 所 需 的 服务 器 端 脚本 改动 。 
代码 清单 33-13 ”从 服务 器 发 送 XML 数据 


function writeResponse(res, data) { 

var total = 0; 

for (fruit in data) { 
total += Number(data[fruit]); 

j 

res.writeHead(200, "OK", { 
"Content-Type": "application/xml", 
"Access-Control-Allow-Origin": "http://t 


res.write("«?xml version='1.0'?>"); 


itan"}); 


res.write("«fruitorder total='" + total + "'>"); 
for (fruit in data) { 
res.write("<item name='" + fruit + "' quantity-'" + data[fruit] + "'/»") 


total += Number(data[fruit]); 
j 
res.write("«/fruitorder»"); 
res.end(); 


} 


修订 后 的 函数 生成 了 一 个 简短 的 XML 文 档 ， 就 像 这 个 : 


<?xml version-'1.0'?» 

<fruitorder total='27'> 
<item name='bananas' quantity='2'/> 
<item name='apples' quantity='5'/> 
<item name-'cherries' quantity-'20'/» 

«/fruitorder» 


需要 在 客户 端 显示 的 信息 的 一 个 超 集 ， 


























这 是 





但 它 的 格式 无 法 再 用 DOM innerHTML 属 性 简单 


显示 了 。 幸 好 ，XMLHttpRequest 对 象 让 你 能 够 轻松 处 理 XML， 这 并 不 奇怪 ， 因 为 XML 正 是 Ajax 





里 的 x。 代 码 清单 33-14 展 示 了 如 何在 浏览 器 上 使 月 





月 XML 。 
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代码 清单 33-14 “处理 XML Ajax 响应 


<script> 
document. getElementById("submit").onclick = handleButtonPress; 


var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form = document.getElementById("fruitform"); 


var formData - new Object(); 

var inputElements - document.getElementsByTagName(" input"); 

for (var i = 0; i « inputElements.length; i++) { 
formData[inputElements[i].name] = inputElements[i].value; 


httpRequest = new XMLHttpRequest(); 

httpRequest.onreadystatechange = handleResponse; 
httpRequest.open("POST", form.action) ; 
h 
h 





ttpRequest.setRequestHeader("Content-Type", "application/json"); 
ttpRequest.send(JSON.stringify(formData) ) ; 











function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
httpRequest. overrideMimeType("application/xml") ; 
var xmlDoc = httpRequest.responseXML; 
var val = xmlDoc.getElementsByTagName("fruitorder")[0].getAttribute("total"); 
document.getElementById("results").innerHTML = "You ordered " 
+ val + " items"; 





} 
} 


</script> 


所 有 为 处 理 XML 数 据 所 做 的 改动 都 位 于 脚本 的 handleResponse 函 数 内 。 当 请 求 成 功 完成 后 ， 
我 所 做 的 第 一 件 事 就 是 覆盖 响应 的 MIME 类 型 : 

httpRequest.overrideMimeType("application/xml"); 

这 一 改动 对 示例 来 说 其 实 并 非 必需 ， 因 为 服务 器 发 送 的 是 一 张 完整 的 XML 文档 。 但 是 ,在 
使 用 XML 片段 时 , 很 重要 的 一 点 是 要 明确 告知 浏览 器 你 正在 处 理 XML, 否则 XMLHttpRequest 对 象 
不 会 正确 支持 responseXML 属 性 。 我 在 下 面 的 语句 里 使 用 了 这 个 属性 : 


var xmlDoc = httpRequest.responseXML; 


responsexML 属 性 是 responseText 的 蔡 代 属性 。 它 解析 接收 到 的 XML ， 然 后 将 其 作为 一 个 
Document 对 象 返 回 。 之 后 你 就 可 以 采用 这 种 技巧 在 XML 里 导航 了 ，, 方法 是 使 用 针对 HTML 的 DOM 
功能 ( 在 第 26 章 介绍 过 )， 就 像 这 样 : 


var val = xmlDoc.getElementsByTagName("fruitorder")[0].getAttribute("total"); 
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这 条 语句 获取 了 第 一 个 fruitorder 元 素 里 的 total 属 性 值 ， 随 后 我 用 它 和 innerHTML 属 性 一 起 
向 用 户 显示 出 结果 : 


document.gettlementById("results").innerHTML = "You ordered "+ val + " items"; 


比较 DOM 里 的 HIML 和 XML 


是 时 候 承认 一 些 事 了 。 在 本 书 的 第 四 部 分 ， 我 有 意 弥 合 了 HTML、XML 和 DOM 之 间 的 联 
系 。 这 一 部 分 介绍 的 所 有 导航 和 处 理 HTML 文 档 元 素 的 功能 都 可 以 用 于 处 理 XML。 

事实 上 , 代表 HTML 元 素 的 那些 对 象 都 源 于 一 些 从 XML 支持 中 产生 的 核心 对 象 。 在 大 多 数 
情况 下 ， 对 本 书 的 大 多 数 读者 来 说 ，HTML 支 持 才 是 重点 。 如 果 你 正在 使 用 XML,， 或 许 应 该 花 
些 时 间 研 读 核心 XML 支持 ， 它 的 定义 可 以 在 这 里 找到 : www.w3.org/standards/techs/dom. 

话 虽 如 此 ， 如 果 你 所 做 的 事 大 量 涉 及 XML ， 可 能 应 该 考虑 换 一 种 编码 策略 。XML 很 繁琐 ， 
而 且 浏览 器 执行 复杂 处 理 的 能 力 并 不 总 让 人 满意 。 像 JSON 这 样 定 制 并 简化 过 的 格式 也 许 能 
好 地 为 你 服务 。 

















33.7.3 接收 JSON 数据 


一 般 来 说 ，JSON 数 据 比 XML 更 容易 处 理 ， 因 为 你 最 终 会 得 到 一 个 JavaScript 对 象 ， 可 以 用 核 
心 语言 功能 来 查询 和 操作 它 。 代 码 清 单 33-15 展 示 了 生成 JSON 响 应 所 需 的 服务 器 端 脚 本 修改 。 


代码 清单 33-15 ”在 服务 器 上 生成 JSON 响 应 


function writeResponse(res, data) { 
var total = 0; 
for (fruit in data) { 
total += Number(data[fruit]); 





] 
data.total - total; 
var jsonData - JSON.stringify(data); 


res.writeHead(200, "OK", { 
"Content-Type": "application/json", 
"Access-Control-Allow-Origin": "http://titan"}); 
res.write(jsonData); 
res.end(); 


} 

就 生成 JSON 响 应 而 言 ， 我 要 做 的 仅仅 是 定义 一 个 对 象 〈 它 作为 data 参 数 传递 到 函数 中 ) 的 

total 属 性 ， 然 后 通过 JSON.stringify 用 字符 串 表 示 这 个 对 象 。 服 务 需 会 发 送 响应 给 浏览 需 ， 就 像 

这 样 : 
{"bananas":"2","apples":"5","cherries":"20","total":27} 


代码 清单 33-16 展 示 了 让 浏览 器 处 理 这 个 响应 所 需 的 脚本 修改 。 
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代码 清单 33-16 ”从 服务 器 接收 JSON 响 应 


<script> 
document. getElementById("submit").onclick = handleButtonPress; 


var httpRequest; 


function handleButtonPress(e) { 
e.preventDefault(); 


var form = document.getElementById("fruitform"); 


var formData - new Object(); 

var inputElements - document.getElementsByTagName(" input"); 

for (var i = 0; i « inputElements.length; i++) { 
formData[inputElements[i].name] = inputElements[i].value; 


httpRequest = new XMLHttpRequest(); 

httpRequest.onreadystatechange = handleResponse; 
httpRequest.open("POST", form.action) ; 
h 
h 





ttpRequest.setRequestHeader("Content-Type", "application/json"); 
ttpRequest.send(JSON.stringify(formData) ) ; 








function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
var data = JSON.parse(httpRequest.responseText) ; 
document .getElementById("results").innerHTML = "You ordered " 
+ data.total + " items"; 





} 





</script> 
JSON 极 其 易于 使 用 ， 就 像 这 两 份 代 码 清单 所 演示 的 那样 。 这 种 易 用 性 ， 加 上 表示 方法 的 紧 33 
凑 性 ， 正 是 JSON 变 得 如 此 流行 的 原因 。 








33.8 小结 


在 这 一 章 里 ， 我 继续 介绍 了 Ajax 的 复杂 细节 。 我 向 你 展示 了 如 何 用 手动 和 FormData 对 象 的 方 
式 发 送 数 据 到 服务 器 。 你 还 学 会 了 如 何 发 送 文 件 ， 以 及 如 何在 数据 上 传 到 服务 器 时 监控 进度 。 我 
还 谈 到 了 如 何 处 理 服 务 右 发 送 的 各 种 数据 格式 : HTML、HTML 片 段 、XML 和 JSON。 
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HTML5 文 持 直接 在 浏览 器 中 播放 音频 和 视频 文件 ， 不 需要 使 用 Adobe Flash 这 样 的 插件 。 插 
件 是 令 浏览 器 骨 演 的 主要 原因 之 一 ， 特 别 是 Flash ， 这 个 插件 导致 的 诸多 问题 已 经 让 它 声 名 狼藉 。 

WIT A PAGE, 我 也 已 经 因为 媒体 播放 的 原因 开始 讨 大 Flash 了 。 我 喜欢 在 写作 的 时 候 听 播客 
( podcast )， 而 Chrome 浏 览 器 默认 使 用 Flash 来 播放 它们 。 我 喜欢 集成 带 来 的 方便 ”， 但 是 它 时 不 时 
会 因为 某 些 问题 导致 机 顺 锁 死 。 这 都 快 让 我 发 疯 了 ， 每 一 次 我 都 会 吕 驾 Adobe 公 司 。Flash 的 普遍 
性 是 很 有 用 的 ， 但 软件 的 质量 还 有 很 多 不 尽 如 人 意 的 地 方 。 

正如 你 将 在 这 一 章 里 看 到 的 ，HITML 对 原生 音频 和 视频 的 支持 潜力 巨大 , 但 还 有 一 些 问 题 咪 
待 解决 。 这 些 问 题 主 要 是 关于 每 种 浏览 器 支持 的 媒体 格式 ,以 及 浏览 器 对 它们 播放 文件 格式 能 
所 做 的 不 同 解释 。 表 34-1 提 供 了 本 章 内 容 概要 。 












































提示 “ 想 重 现 这 一 章 中 的 示例 ， 可 能 需要 给 你 的 Web 服 务 器 添加 一 些 MIME 类 型 。 从 代码 清 
单 34-7 中 可 以 看 到 哪些 是 必需 的 。 


表 34-1 本章 内 容 概要 











































































































| 题 解决 方案 代码 清单 

给 HTML 文档 加 入 视频 使 用 video 元 素 34-1 

指定 某 个 视频 文件 是 否 应 当 在 用 户 开始 播 放 前 载 人 使 用 preload 属 性 34-2 

站 定 在 视频 回放 开始 前 显示 的 图 像 si FA poster Jay LE 34-3 

设置 视频 在 屏幕 上 的 尺寸 使 用 width 和 height 属 性 34-4 

指定 视频 来 源 d Fh src TE 34-5 

指定 同一 视频 来 源 的 多 种 格式 更 用 source 元 素 34-6、34-7 

给 HTML 文档 加 入 音频 例 用 audio 元 素 34-8, 34-9 

通过 DOM 操 作 媒体 元 素 if? FHHTMLMediaElement, 、HTMLVideoElement 或 34-10 
HTMLAudioElement 对 象 

获取 浏览 器 是 否 支持 某 个 媒体 格式 的 提示 信息 iti FA canPlayType Jy 14: 34-11 

控制 媒体 回放 全 用 HTMLMediaElement 的 play 和 pause 方 法 ,以 及 提 34-12, 34-13 
供 回 放 详 情 的 属性 




















(D Flash 搬 件 是 直接 集成 在 Chrome 浏 览 占 中 的 。 一 一 译 者 注 
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34.1 使 用 video 元 素 
可 以 用 video 元 素 在 网 页 里 舰 入 视频 内 容 。 表 34-2 介 绍 了 video 元 素 。 


表 34-2 ”video 元 素 


























元 素 video 

元 素 类 型 流 /短语 

允许 具有 的 父 元 素 任何 能 包含 流 或 短语 元 素 的 元 素 

局 部 属性 autoplay, preload, controls, loop. poster, height, width, muted, src 
内 容 source 和 track 元 素 ， 以 及 短语 和 流 内 容 

标签 用 法 开始 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 无 








代码 清单 34-1 展 示 了 这 个 元 素 的 基本 用 法 。 
代码 清单 34-1 使 用 video 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
«video width-"360" height="240" src-"timessquare.webm" 
autoplay controls preload-"none" muted» 


Video cannot be displayed 
«/body» 


«/html» 


如 果 曾 经 在 网 页 里 看 过 视频 ， 那 么 你 会 很 熟悉 使 用 video 元 素 的 效果 ， 如 图 34-1 所 示 。 

如 果 浏 览 絮 不 支持 video 元 素 或 者 无 法 播放 视频 ， 那 么 备用 内 容 (开始 和 结束 标签 之 间 的 内 
容 ) 就 会 代替 它 显 示 。 在 这 个 例子 里 中 , 我 显示 了 一 段 简单 的 文本 消息 , 但 常用 的 技巧 是 提供 使 
用 非 HTML5 技 术 ( 例如 Flash ) 的 视频 播放 ， 以 支持 旧版 的 浏览 器 

video 元 素 有 许多 属性 ， 表 34-3 列 出 了 它们 。 


表 34-3 video 元 素 的 属性 









































属 性 说 RA 
autoplay 如 果 存 在 ， 此 属性 会 使 浏览 器 尽 可 能 立刻 开 RR 
preload 告诉 浏览 器 是 否 要 预先 载 人 视频 。 详 情 请 参见 下 一 节 
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(EE) 

i 性 说 ĦA 
controls 除非 此 属性 存在 ， 否 则 浏览 器 不 会 显示 播放 控件 
loop 如 果 存在 ， 此 属性 会 让 浏览 器 反复 播放 视频 
poster SE EI AY bz Ao TERES 34.1.27 
height 指定 视频 的 高 度 。 详 情 请 参见 34.1.3 节 
width 指定 视频 的 宽度 。 详 情 请 参见 34.1.3 节 
muted 如 果 此 属性 存在 ， 视 频 从 一 开始 就 会 处 于 静音 状态 
src 指定 要 显示 的 视频 。 详 情 请 参见 34.1.4 节 

Í P =) aa 

/ © Bample x NE 

€ > Q |Qtitan/listings/example.html XA 


























图 34-1 使 用 video 元 素 











34.1.1 预先 加 载 视 频 


preload 属 性 告诉 浏览 器 : 当 它 加 载 完 包含 video 元 素 的 网 页 后 , 是 否 应 该 积极 地 去 下 载 视频 。 
Beea D Aan a Ds 
表 34-4 介 绍 了 这 个 属性 允许 设置 的 值 。 


表 34-4 ” preload 属性 所 允许 的 值 









































值 说 明 
none 用 户 开始 播放 之 前 不 会 载 入 视频 
metadata ] 户 开始 播放 之 前 只 能 载 入 视频 的 元 数据 ( 宽度、 高 度 、 第 一 帧 、 长 度 和 其 他 此 类 信息 ) 
auto 请 求 浏览 器 尽快 下 载 整个 视频 。 浏 览 器 可 以 忽略 这 个 请 求 。 这 是 默认 行为 
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在 决定 是 否 预先 加 载 视频 时 , 应 当权 衡 用 户 想 要 观看 视频 的 可 能 性 与 自动 载 人 视频 内 容 所 需 
要 的 带宽 。 自 动 载 人 视频 会 带 来 更 平滑 的 用 户 体验 , 但 它 可 能 会 大 大 提升 经 营 成 本 ,如 果 用 户 没 
有 观看 视频 就 离开 网 页 ， 那 么 这 些 成 本 就 浪费 了 。 

这 个 属性 的 metadata 值 可 以 被 用 来 在 none 和 auto 值 之 间 建 立 起 适度 的 平衡 。none 值 的 问题 在 于 
视频 内 容 会 在 屏幕 上 显示 为 一 片 空白 区 域 。metadata 值 会 让 浏览 器 获取 足够 的 信息 来 向 用 户 展示 视 
频 的 第 一 帧 ， 而 不 必 下 载 全 部 内 容 。 代 码 清单 34-2 展 示 了 在 同一 个 文档 里 使 用 none 和 metadata 值 。 


代码 清单 34-2 ”将 none 和 metadata 值 用 于 preload 属 性 


«IDOCTYPE HTML» 




















«html» 
«head» 
«title»Example«/title» 
«/head» 
«body» 
«video width-"360" height-"240" src-"timessquare.webm" 
controls preload-"none" muted» 
Video cannot be displayed 
</video> 
<video width="360" height="240" src="timessquare.webm" 
controls preload-"metadata" muted> 
Video cannot be displayed 
</video> 
</body> 
</html> 


从 图 34-2 可 以 看 到 这 些 值 如 何 影响 展示 给 用 户 的 预览 画面 。 


rc 





© Example \ 
| a 
|| € > QC | O titan/iistings/example.htm 























图 34-2 ”将 none 和 metadata 值 用 于 preload 属 性 








gt 
OF 


metadata 值 向 用 户 提供 了 漂亮 的 预览 画面 ， 但 你 需要 慎重 一 些 。 当 我 用 网 络 分 析 工 具 测 
试 这 个 属性 时 ， 我 发 现 尽 管 只 请 求 了 元 数据 ， 但 是 有 些 浏览 器 实际 上 会 预先 下 载 整个 视 
频 。 平 心 而 论 ， 浏 览 器 可 以 自由 选择 是 否 忽略 preload 属 性 所 表达 的 偏好 。 但 是 ， 如 果 你 
需要 限制 带宽 的 消耗 ，poster 属 性 可 能 更 胜任 一 些 。 详 情 请 参见 下 一 节 
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34.1.2 ”显示 占 位 图 像 


可 以 用 poster 属 性 向 用 户 呈 现 一 张 占 位 图 像 。 这 张 图 像 会 显示 在 视频 的 位 置 ， 直至 用 户 开 始 
播放 。 代 码 清单 34-3 展 示 了 如 何 使 用 poster 属 性 。 


代码 清单 34-3 ”使 用 postez 属 性 来 指定 占 位 图 像 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<video width="360" height="240" src="timessquare.webm" 
controls preload="none" poster="poster.png"> 
Video cannot be displayed 
</video> 
<img src="poster.png"/> 
</body> 
</html> 


我 给 视频 文件 的 第 一 帧 做 了 一 张 屏幕 截图 ， Wate E TRAIT T Poster (海报 ) 这 张 图 
像 包括 了 视频 控件 ， 以 此 提示 用 户 这 张 海 报 代表 一 段 视 频 剪辑 。 我 还 在 示例 中 加 入 了 一 个 img 元 
素 ， 以 演示 video 元 素 会 不 加 改动 地 展示 这 张 海 报 图 像 。 图 34-3 展 示 了 两 种 形式 的 海报 。 























SS exi 
© Example 


€ > Q Otitan/listings/example.htr wf 




















图 34-3 ”将 海报 用 于 视频 剪辑 





34.1.3 ”设置 视频 尺寸 


如 果 省 略 width 和 height 属 性 , 浏览 器 就 会 显示 一 个 很 小 的 占 位 元 素 , 并 在 元 数据 可 用 时 (也 
就 是 当 用户 开 始 播放 , 或 者 preload 属 性 被 设 为 metadata 时 ) 把 它 调整 到 视频 原始 尺寸 的 大 小 。 这 
可 能 会 产生 颤 动感 ， 因 为 页 面 布局 需要 调整 以 容纳 视频 。 

如 果 指 定 width 和 height 属 性 ， 浏 览 器 会 保持 视频 的 长 宽 比 (不必 担 心 视频 会 向 任 一 方向 拉 
伸 )。 代 码 清单 34-4 展 示 了 width 和 height 属 性 的 用 法 。 
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代码 清单 34-4 ”应 用 width 和 height 属 性 


<!DOCTYPE HTML> 


«html» 
«head» 
<title>Example</title> 
<style> 
video { 
background-color: lightgrey; 
border: medium double black; 
} 
</style> 
</head> 
<body> 
«video src-"timessquare.webm" controls preload-"auto" width="600" height="240"> 
Video cannot be displayed 
</video> 
</body> 
</html> 


这 个 例子 中 设置 的 width 属性 与 height 属 性 的 比例 是 失衡 的 。 我 还 给 video 元 素 应 用 了 一 个 样 
式 ， 以 凸显 浏览 器 为 了 保持 视频 的 长 宽 比 ， 只 会 使 用 部 分 指派 给 该 元 素 的 空间 。 岁 34-4 展 示 了 这 
样 做 的 结果 。 














f [3 
cx.) 
© Exemple Y = 


€ > Œ  Otitan/listings/example.htm! wf 














图 34-4 Tu Vi aU TR ELE 


34.1.4 ”指定 视频 来 源 〈 和 格式 ) 


指定 视频 最 简单 的 方式 是 使 用 src 属 性 ， 并 提供 所 需 视 频 文 件 的 URL。 这 就 是 我 在 之 前 例子 
里 所 用 的 方法 ， 代 码 清 单 34-5 再 次 展示 了 它 。 


代码 清单 34-5 ”用 src 属 性 指定 视频 来 源 


<!DOCTYPE HTML» 
<html> 
<head> 
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<title>Example</title> 

</head> 

<body> 
«video src-"timessquare.webm" controls width="360" height="240"> 

Video cannot be displayed 

</video> 

</body> 

</html> 


在 这 份 代 码 清单 中 , 我 用 src 属 性 指定 了 文件 timessquare.webm。 这 是 一 个 用 WebM 格 式 编 码 
的 文件 。 从 这 里 开始 ， 你 就 进入 了 视频 格式 的 迷宫 。 本 书 前 面 提 到 过 浏览 器 战争 ， 也 就 是 几 家 
公司 试图 通过 给 HTML 和 相关 技术 添加 非 标准 内 容 来 控制 浏览 器 市 场 。 让 人 高 兴 的 是 ， 那 些 日 
子 已 经 一 去 不 复 返 ， 遵 循 标准 现在 已 经 跟 速 度 、 易 用 性 和 Logo 有 吸引 力 一 样 ， 成 为 浏览 器 的 一 
个 卖点 。 

不 幸 的 是 ,视频 格式 还 没有 实现 这 一 点 。 对 一 些 当 事 方 来 说 ， 如 果 他 们 能 将 自己 的 格式 确立 
为 HTML5 的 主导 格式 ， 就 有 机 会 赚 取 大 笔 财 宣 。 他 们 可 以 收取 授权 费 ， 征 收 版 税 ， 专 利 组 合 的 
价值 也 将 增长 。 因 此 ,目前 还 没有 哪 一 种 视频 格式 被 普遍 支持 ,如果 你 想 将 视频 推 向 各 种 各 样 的 
HTML5 用 户 , 就 要 做 好 以 多 种 格式 编码 视频 的 准备 。 表 34-5 展 示 了 当前 得 到 大 力 支 持 的 格式 (但 
随 着 时 间 推 移 几 乎 肯定 会 发 生变 化 )。 

表 34-5 ”浏览 器 重点 支持 的 视频 格式 
d R 说 明 x 持 


WebM 此 格式 由 谷歌 提供 支持 ， 目 标 是 创建 一 个 无 专利 约束 ， 免 版 税 的 格式 。 Opera, Chrome, Firefox 
MP4/H.264 格 式 一 方 的 人 士 已 经 公开 寻求 使 用 专利 池 来 对 WebM 提 起 诉讼 
(或 者 至 少 让 人 们 因为 担心 而 不 再 使 用 它 ) 
























































































































































Ogg/Theora Ogg Theora 是 一 种 开放 、 免 版 税 和 无 专利 约束 的 格式 Opera, Chrome, Firefox 
MP4/H.264 此 格式 当前 可 以 免费 使 用 到 2015 年 , 因为 许可 方 已 经 公开 放弃 了 常规 的 分 Internet Explorer, Chrome, 
发 收费 计划 POS 





一 个 不 幸 的 事实 是 , 没有 哪 一 种 格式 能 够 用 于 所 有 的 主流 浏览 絮 。 你 必须 以 多 种 格式 编码 视 
频 ， 直 到 出 现 统一 的 格式 为 止 。 


注意 ”将 会 跳 过 大 量 视 频 编 码 方面 的 细节 。 它 们 包括 容器 、 编 解码 器 和 其 他 让 人 兴奋 的 概念 。 
要 点 在 于 ， 每 种 格式 都 包含 一 些 选项 ， 以 质量 或 压缩 率 为 代价 换取 兼容 性 (考虑 到 浏览 
器 对 视频 的 支持 日 新 月 异 ， 其 中 的 组 合 也 会 经 常 发 生变 化 )。 我 建议 你 查阅 主流 浏览 器 的 
发 布 说 明 来 确定 支持 的 程度 ， 或 者 像 我 一 样 ， 干 脆 以 所 有 可 能 的 组 合 形式 编码 视频 ， 看 
哪 一 种 会 得 到 最 广泛 的 支持 。 


可 以 使 用 source 元 素来 指定 多 个 格式 。 表 34-6 介 绍 了 这 个 元 素 。 
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表 34-6 ” source 元 素 


THR 

元 素 类 型 
允许 具有 的 父 元 素 
局 部 属性 

内 容 

标签 用 法 

是 否 为 HTML5 新 增 
在 HTML5 中 的 变化 
习惯 样式 














source 

无 

video, audio 
SIC, 
X 
虚 元 素 形 式 


type. media 


x 


代码 清单 34-6 展 示 了 如 何 使 用 source 元 素来 向 浏览 器 提供 备 选 视频 格式 。 


代码 清单 34-6 ”用 source 元 素 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 


<video controls width="360" height="240"> 
«source src-"timessquare.webm"/» 
«source src-"timessquare.ogv"/» 
«source src="timessquare.mp4"/> 
Video cannot be displayed 

«/video» 

</body> 
</html> 


浏览 器 会 沿 着 列表 顺序 寻找 它 能 够 播放 的 视频 文件 。 这 可 能 会 引发 多 个 服务 器 请 求 以 获得 每 
个 文件 的 额外 信息 。 浏 览 器 判断 它 是 否 能 播放 某 个 视频 的 依据 之 一 是 服务 顺 返 回 的 MIME 类 型 。 





可 以 通过 给 source 元 素 应 用 type 属 性 来 提示 用 户 ， 方 法 是 在 其 中 指定 文件 的 MIME 类 型 ， 


清单 34-7 所 示 。 


代码 清单 34-7 在 source 元 素 上 应 用 type 属 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
</head> 
<body> 
<video controls width="360" height="240"> 
<source src="timessquare.webm" type="video/webm" /> 
«source src-"timessquare.ogv" type-"video/ogg" /> 
«source src-"timessquare.mp4" type-"video/mp4" /» 
Video cannot be displayed 


HE 





如 代码 
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</video> 
</body> 
</html> 


提示 media/£ ere rn nce 关于 如 何 给 这 个 属性 定义 值 的 
详细 说 明 请 参 EN 见 第 7 章 早 。 


34.1.5 track 元 素 














HTML5 规 范 包 含 了 track 元 素 , 它 提 供 了 一 套 视频 相关 内 容 的 实现 机 制 。 这 些 内 容 包括 字幕 、 
说 明和 章节 标题 。 表 34-7 介 绍 了 这 个 元 素 , 但 目前 还 没有 哪 一 种 主流 浏览 器 支持 这 个 元 素 ”。 
表 34-7 ”track 元 素 



































元 素 track 

元 素 类 型 无 

允许 具有 的 父 元 素 video, audio 

局 部 属性 kind, src, srclang, label, default 
内 容 无 

标签 用 法 虚 元 素 形 式 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 无 


34.2 ”使 用 audio 元 素 


audio 元 素 允 许 你 在 HTML 文 档 里 租 入 音频 内 容 。 表 34-8 介 绍 了 这 个 元 素 。 
表 34-8 ”audio 元 素 









































元 素 audio 

元 素 类 型 流 /短语 

允许 具有 的 父 元 素 任何 能 包含 流 或 短语 元 素 的 元 素 

局 部 属性 autoplay, preload, controls, loop, muted, src 
内 容 source 和 track 元 素 ， 以 及 短语 和 流 内 容 

标签 用 法 开始 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 无 

习惯 样式 无 





(D Chrome 23, Internet Explorer 10, Opera 12.10 和 Safari 6 已 经 开始 支持 这 个 元 素 了 。 一 一 译 者 注 





FH 
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可 以 看 到 ，audio 元 素 和 video 元 素 有 许多 共同 点 。 代 码 清单 34-8 展 示 了 audio 元 素 的 用 法 。 
代码 清单 34-8 使 用 audio 元 素 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<audio controls src="mytrack.mp3" autoplay> 
Audio content cannot be played 
</audio> 
</body> 
</html> 


可 以 用 src 属 性 指定 音频 的 来 源 。 虽 然 音频 格式 的 世界 不 像 视 频 那 样 充满 争议 ， 但 是 仍然 没 
有 哪 一 种 格式 能 够 被 所 有 的 浏览 絮 原 生 播 放 , 不 过 , 我 对 音频 将 会 发 生 的 改变 比 对 视频 要 更 乐观 


一 些 。 














提示 “应 用 autoplay 属 性 并 忽略 contTols 属 性 可 以 制造 出 一 种 情形 , 让 音频 能 自动 播放 而 用 户 无 
法 停止 它 。 我 代表 你 的 所 有 用 户 请 求 你 不 要 这 么 做 ， 特别 是 当 你 打算 播放 沉 问 、 合 成 、 
无 名 等 本 质 上 无 法 识别 的 音乐 类 型 时 。 把 这 样 的 音乐 施加 给 用 户 会 让 每 一 次 操作 感觉 就 
像 是 一 次 无 穷 无 尽 的 电梯 之 旅 ， 当 你 的 音 轨 不 含有 可 辨认 的 乐器 时 尤为 如 此 。 请 不 要 将 
乏味 、 无 精 打 采 和 无 意义 的 音乐 施加 给 你 的 用 户 ， 尤 其 不 要 让 它 在 自动 播放 的 同时 还 不 
给 用 户 禁 用 它 的 方法 。 





代码 清单 34-9 展 示 了 可 以 如 何 使 用 source 元 素来 提供 多 种 格式 。 
代码 清单 34-9 用 source 元 素 提 供 多 种 音频 格式 


<!DOCTYPE HTML> 
«html» 
«head» 
«title»Example«/title» 
«/head» 
«body» 
«audio controls autoplay» 
«source src-"mytrack.ogg" /» 
«source src-"mytrack.mp3" /> 
«source src-"mytrack.wav" /» 
Audio content cannot be played 
«/audio» 
</body> 
</html> 


我 在 这 两 个 例子 中 都 使 用 了 controls 属 性 ， 这 样 浏览 咒 就 会 对 用 户 显 示 默 认 的 播放 控件 。 它 
们 在 不 同 的 浏览 器 中 外 观 各 异 ， 但 图 34-5 能 让 你 大 致 了 解 会 有 些 什 么 。 
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2134-5 “音频 元 素 在 Chrome 浏 览 器 里 的 默认 播放 控件 





34.3 ”通过 DOM VERA REA 


audio 和 video 元 素 有 着 很 大 的 相似 性 ， 所 以 HTMLMediaElement 对 象 在 DOM 里 为 它们 统一 
了 核心 功能 。audio 元 素 在 DOM 里 由 HTMLAudioElement 对 象 所 代表 ， 但 此 对 象 没 有 定义 不 同 于 
HTMLMediaElement 的 额外 功能 。video 元 素 由 HTMLVideoElement 对 象 所 代表 ， 而 它 定 义 了 一 些 额 外 
的 属性 ， 我 会 在 本 章 后 面 进行 介绍 。 


提示 。audio 和 video 元 素 的 相似 度 是 如 此 之 高 ,以 至 于 它们 的 唯一 区 别 仅 仅 是 在 屏幕 上 占据 的 空 
间 大 小 。audio 元 素 不 会 占用 一 大 块 屏 幕 空间 来 显示 视频 图 像 。 FEL, 甚至 可 以 用 audio 
元 素来 播放 视频 文件 ( 当然 ， 这么 做 只 能 听 到 配乐 )， 也 可 以 用 video 元 素来 播放 音频 文 
JF (不 过 视频 显示 区 域 会 保持 空白 )。 这 看 起 来 很 奇怪 ， 但 其 实 是 可 行 的 。 


34.3.1 获得 媒体 信息 


HTMLMediaElement 对 象 定义 了 许多 成 员 ， 你 可 以 用 它们 来 获取 和 修改 元 素 及 其 关联 媒体 的 信 
息 。 表 34-9 介 绍 了 它们 。 


表 34-9 HTMLMediaElement 对 象 的 基本 成 员 






























































成 B 说 明 返 回 
autoplay 获取 或 设置 autoplay 属 性 是 否 存在 布尔 值 
canPlayType(«type») 获取 浏览 需 能 否 播放 特定 MIME 类 型 的 提示 字符 串 
currentSrc 获取 当前 的 来 源 字符 串 
controls 获取 或 设置 controls 属 性 是 否 存在 布尔 值 
defaultMuted 获取 或 设置 muted 属 性 一 开始 是 否 存在 布尔 值 
loop 获取 或 设置 1oop 属 性 是 否 存在 布尔 值 
muted 获取 或 设置 muted 属 性 是 否 存在 布尔 值 
preload 获取 或 设置 preload 属 性 的 值 字符 串 
SIC 获取 或 设置 src 属 性 的 值 字符 串 
volume 获取 或 设置 音量 ， 范 围 从 0.0 到 1.0 数值 
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HTMLVideoElement 对 象 定义 了 表 34-10 中 展示 的 额外 属性 。 





表 34-10 ”HTMLVideoElement 对 象 定义 的 属性 























成 员 说 明 返 回 
height 获取 或 设置 height 属 性 的 值 数值 
poster 获取 或 设置 poster 属 性 的 值 字符 串 
videoHeight 获取 视频 的 原始 高 度 数值 
videoWidth 获取 视频 的 原始 宽度 数值 
width 获取 或 设置 width 属性 的 值 数值 

代码 清单 34-10 展 示 了 如 何 使 用 一 些 HTMLMediaElement 属 性 来 获取 媒体 元 素 的 基本 信息 。 


代码 清单 34-10 ”获取 媒体 元 素 的 基本 信息 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<style> 
table (border: thin solid black; border-collapse: collapse; } 
th, td {padding: 3px 4px;} 
body > * (float: left; margin: 2px; } 
</style> 
</head> 
<body> 


<video id="media" controls width="360" height="240" preload="metadata"> 
<source src="timessquare.webm"/> 
<source src="timessquare.ogv"/> 
<source src="timessquare.mp4"/> 
Video cannot be displayed 
</video> 
<table id="info" border="1"> 
<tr><th>Property</th><th>Value</th></tr> 
</table> 
<script> 


var mediaElem = document.getElementById("media"); 
var tableElem = document.getElementById("info"); 








var propertyNames = ["autoplay", "currentSrc", "controls", "loop", "muted", 
"preload", "src", "volume"]; 
for (var i = 0; i < propertyNames.length; i++) { 
tableElem.innerHTML 4- 
"<tr><td>" + propertyNames[i] + "«/td»«td»" + 
mediaElem[propertyNames[i]] + "</td></tr>"; 








} 
</script> 
</body> 
</html> 


这 个 例子 中 的 脚本 在 一 张 表 格 中 显示 了 许多 属性 的 值 , 位 置 就 在 video 元 素 的 劳 边 。 从 图 34-6 
可 以 看 到 它 的 结果 。 
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图 34-6 “显示 视频 元 素 的 基本 信息 























图 中 显示 的 是 Opera， 因 为 它 是 唯一 正确 实现 了 currentSrc 属 性 的 浏览 需 。 这 个 属性 显示 
了 src 属 性 的 值 ， 它 或 者 来 自 媒 体 元 素 本 身 ， 或 者 在 有 多 种 格式 可 用 的 情况 下 来 自 所 使 用 的 


source 元 素 。 
34.3.2 ”评估 回放 能 

canpPlayType 方 法 可 以 用 来 了 解 浏览 器 是 否 能 够 播放 特定 的 媒体 格式 。 这 个 方法 会 返回 
表 34-11 里 列 出 的 其 中 一 个 值 。 











表 34-11 canplayType 属 性 所 允许 的 值 
值 说 明 

















"" ( 空 字 符 串 ) 浏览 器 无 法 播放 该 媒体 类 型 
maybe 浏览 器 也 许可 以 播放 该 媒体 类 型 
probably 浏览 器 有 相当 把 握 能 播放 该 媒体 类 型 














这 些 值 显然 不 够 明确 ， 这 源 于 一 些 媒体 格式 及 其 创建 时 可 用 编码 选项 的 复杂 性 。 代 码 清 
单 34-11 展 示 了 canPlayType 方 法 的 用 法 。 





代码 清单 34-11 使 用 canPlayType 方 法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
table (border: thin solid black; border-collapse: collapse; } 
th, td (padding: 3px 4px; } 
body » * (float: left; margin: 2px;] 
</style> 
</head> 
<body> 
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«video id-"media" controls width-"360" height-"240" preload-"metadata"» 
Video cannot be displayed 
«/ video» 
«table id-"info" border-"1"» 
<tr><th>Property</th><th>Value</th></tr> 
</table> 
<script> 
var mediaElem = document.getElementById("media"); 
var tableElem = document.getElementById("info"); 


var mediaFiles = ["timessquare.webm", "timessquare.ogv", "timessquare.mp4"]; 
var mediaTypes = ["video/webm", "video/ogv", "video/mp4"]; 
for (var i = 0; i « mediaTypes.length; i++) { 
var playable = mediaElem.canPlayType(mediaTypes[i]); 
if (!playable) { 
playable = "no"; 


tableElem.innerHTML += 

"<tr><td>" + mediaTypes[i] + "</td><td>" + playable + "</td></tr>"; 
if (playable == "probably") { 

mediaElem.src = mediaFiles[i]; 
} 


} 


</script> 
</body> 
</html> 


在 这 个 例子 的 脚本 中 ， 我 用 canPlayType 方 法 评估 了 一 组 媒体 类 型 。 如 果 收 到 一 个 probably 
答复 ,就 会 设置 video 元 素 的 src 属 性 值 。 通 过 这 种 方式 ,我 在 一 张 表格 里 记录 了 每 一 种 媒体 类 型 
的 答复 。 

用 这 种 方式 选择 媒体 时 需要 多 加 小 心 ， 因 为 浏览 器 评估 自身 格式 播放 能 力 的 方法 各 不 相同 。 
举 个 例子 ， 图 34-7 展 示 了 Firefox 浏 览 器 的 答复 。 
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图 34-7  PEThFirefoxiXl Và zi HJ BEAR CE 
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Firefox 浏 览 器 相当 看 好 WebM， 同 时 确定 自己 无 法 播放 Ogg 和 MP4 文 件 。 然 而 ，Firefox 浏 览 
器 似乎 能 很 好 地 处 理 Ogg 视 频 文件 。 图 34-8 展 示 了 Chrome 浏 览 器 的 答复 。 
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134-8 ”评估 Chrome 浏 览 器 的 媒体 格式 支持 


Chrome 浏 览 器 的 观点 则 要 保守 得 多 , 但 它 其 实 可 以 自如 地 播放 全 部 三 种 媒体 文件 。 事实 上 ， 
Chrome 是 如 此 保守 ， 以 至 于 我 不 能 从 canPlayType 方 法 获得 一 个 probably 答 复 ， 因 此 没有 选择 
媒体 。 

很 难 评论 浏览 器 在 答复 中 所 表现 出 的 不 一 致 性 。 有 太 多 因素 使 它们 无 法 给 出 明确 的 答案 , 但 
它们 在 评 佑 支持 时 使 用 不 同方 式 这 一 点 意味 着 你 应 当 非 常 谨慎 地 使 用 canPlayType 方 法 。 














34.3.3 ”控制 媒体 回放 


HTMLMediaElement 对 象 定义 了 许多 成 员 ， 它 们 让 你 能 够 控制 回放 和 获得 回放 信息 。 这 些 属性 
和 方法 如 表 34-12 所 示 。 
























































表 34-12 HTMLMediaElement 对 象 的 回放 成 员 
成 A 说 明 & E 
currentTime 返回 媒体 文件 当前 的 回放 点 数值 
duration 返回 媒体 文件 的 总 时 长 数值 
ended 如 果 媒 体 文件 已 经 播放 完毕 则 返回 true 布尔 值 
pause() 暂停 媒体 回放 void 
paused 如 果 回 放 和 暂停 就 返回 true， 和 否则 返回 false 布尔 值 
play() 开始 回放 媒体 void 














代码 清单 34-12 展 示 了 如 何 使 用 表格 中 的 属性 来 获取 回放 信息 。 
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代码 清单 34-12 ”用 HTMLMediaElement 属 性 获取 媒体 回放 详情 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<style> 
table (border: thin solid black; border-collapse: collapse; } 
th, td (padding: 3px 4px;] 
body » * (float: left; margin: 2px;] 
div (clear: both;} 
</style> 
</head> 
<body> 
<video id="media" controls width="360" height="240" preload="metadata"> 
<source src="timessquare.webm"/> 
<source src="timessquare.ogv"/> 
<source src="timessquare.mp4"/> 
Video cannot be displayed 
</video> 
<table id="info" border="1"> 
<tr><th>Property</th><th>Value</th></tr> 
</table> 
<div> 
<button id="pressme">Press Me</button> 
</div> 
<script> 
var mediaElem = document.getElementById("media"); 
var tableElem = document.getElementById("info"); 


document.getElementById("pressme").onclick = displayValues; 
displayValues(); 


function displayValues() { 
var propertyNames = ["currentTime", "duration", "paused", "ended" ]; 
tableElem.innerHTML = ""; 
for (var i = 0; i < propertyNames.length; i++) { 
tableElem.innerHTML += 
"<tr><td>" + propertyNames[i] + "</td><td>" + 
mediaElem[propertyNames[i]] + "</td></tr>"; 








} 
} 


</script> 
</body> 
</html> 


这 个 例子 包含 一 个 button 元 素 , 当 它 被 按 下 后 会 使 表格 显示 出 currentTime , duration, paused 
和 ended 属 性 的 当前 值 。 从 图 34-9 可 以 看 到 它 的 效果 。 
可 以 使 用 回放 方法 代替 默认 的 媒体 控件 。 代 人 码 清单 34-13 对 此 进行 了 演示 。 
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图 34-9 ”用 截取 回放 属性 值 作为 对 按钮 点 击 的 响应 





代码 清单 34-13 ”替换 默认 的 媒体 控件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<video id="media" width="360" height="240" preload="auto"> 
«source src-"timessquare.webm"/» 
«source src-"timessquare.ogv"/» 
«source src="timessquare.mp4"/> 
Video cannot be displayed 
«/video» 
<div> 
<button>Play</button> 
<button>Pause</button> 
</div> 
<script> 
var mediaElem = document.getElementById("media") ; 


var buttons = document.getElementsByTagName("button") ; 

for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 

} 


function handleButtonPress(e) { 
switch (e.target.innerHTML) { 

case 'Play': 
mediaElem.play(); 
break; 

case 'Pause': 
mediaElem.pause(); 
break; 
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</script> 
</body> 
</html> 


在 这 个 例子 里 , 我 省 略 了 video 元 素 的 controls 属 性 , 并 用 点 击 button 按 钮 触发 的 play 和 pause 
方法 来 启动 和 停止 媒体 回放 。 从 图 34-10 可 以 看 到 它 的 效果 。 
f acim) 
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图 34-10 ”替换 默认 的 媒体 控件 


提示 HTML 规范 定义 了 一 系列 有 关 载 入 和 播放 媒体 的 事件 ， 它 们 在 HTMLMediaElement 对 象 的 
controller 属 性 里 体现 。 在 本 书 编写 过 程 中 , 还 没有 任何 一 种 主流 浏览 器 支持 这 个 属性 或 
它 返 回 的 MediaController 对 象 。 





34.4 小结 


在 这 一 章 里 , 我 向 你 展示 了 HTML5 如 何 通过 video 和 audio 元 素 支 持原 生 的 媒体 回放 , 以 及 如 
何 用 DOM 控 制 这 些 元 素 。 考 虑 到 Flash 等 插件 存在 的 种 种 问题 ， 原 生 媒体 支持 具有 很 大 的 潜力 ， 
但 对 这 种 方式 的 接纳 程度 仍然 处 于 早期 阶段 。 现在 你 只 能 使 用 混合 搭配 的 做 法 , 直至 格式 支持 问 
题 得 到 解决 ， 以 及 有 超过 临界 数量 的 浏览 器 能 支持 这 种 方式 为 止 。 


使 用 canvas 元 素 〈 第 1 部 分 ) 








在 前 一 章 里 ， 我 间接 提 到 ( 并 简短 地 抱怨 ) 了 大 多 数 Web 应 用 程序 开发 者 和 设计 师 与 Adobe 





Flash 之 间 又 爱 又 恨 的 关系 。 恨 源 于 缺乏 稳定 性 和 安全 性 ， 因 为 Adobe 公 司 近期 被 指责 软件 质量 精 


糕 。 对 Flash 的 爱 源 于 它 已 经 被 普遍 安装 ， 以 及 你 可 以 用 它 来 制作 富 内 容 的 方式 。 
HTML5 定 义 了 canvas 元 素 作 为 原生 的 Flash 替 代 。 如 果 你 阅读 过 任何 对 HTMLS 新 功能 的 介 


绍 ，canvas 也 许 会 是 最 先 被 提 及 的 功能 之 一 ， 它 也 很 可 
就 像 你 常见 的 那样 ， 广 告 宣传 与 事实 并 不 相符 。c 























能 被 描述 成 “Flash 杀 手 ”。 
anvas 元 素 是 一 种 可 供 绘图 的 平面 ， 我 们 用 


























JavaScript 对 它 进 行 配置 和 操作 。 它 很 灵活 , 相对 容易 使 用 , 并 且 提 供 了 足够 多 的 功能 来 代替 Flash 








制作 某 些 类 型 的 富 内 容 。 但 把 canvas 元 素 称 为 “Flash 杀 手 ”( 甚至 仅仅 是 Flash 替 代 品 ) 还 为 时 过 














早 ， 因 为 canvas 要 想 接管 局 面 还 需要 一 段 时 间 。 


这 是 关于 canvas 元 素 的 第 一 章 (一 共有 两 章 )。 在 这 一 章 ， 我 会 向 








你 展示 如 何 准备 canvas 元 


素 , 并 介绍 我 们 会 用 来 与 canvas 交 互 的 那些 JavaScript 对 象 。 我 还 会 向 你 展示 此 元 素 对 基本 图 形 的 
支持 ， 如 何 使 用 纯色 和 渐变 色 ， 以 及 如 何在 画布 上 绘制 图 像 。 下 一 章 会 向 你 展示 如 何 绘制 更 复杂 
的 图 形 ， 以 及 如 何 应 用 特效 和 变换 。 表 35-1 提 供 了 本 章 内 容 概 要 。 

















表 35-1 本章 内 容 概要 



















































































问 i 解决 方案 代码 清单 
准备 用 来 绘图 的 canvas ”在 DOM 里 找到 canvas 元 素 ， 然 后 调用 HTMLCanvas0bject 上 的 getContext 方 法 35-1, 35-2 
绘制 矩形 使 用 fillRect 或 strokeRect 方 法 35-3 
清除 矩形 使 用 clearRect 方 法 35-4 
设置 绘图 操作 的 样式 在 执行 操作 前 设置 绘制 状态 属性 ( 如 linewidth 和 1ineJoin ) 的 值 35-5、35-6 
在 绘图 操作 中 使 用 纯色 ”给 fillstyle 或 strokestyle 属 性 设置 一 个 颜色 值 或 者 名 称 35-7 
创建 线性 渐变 调用 createLinearGradient 方 法 ， 并 通过 addColorstop 方 法 给 渐变 添加 颜色 35-8 ~ 35-11 
创建 径 向 渐变 调用 createRadialGradient 方 法 ， 并 通过 addColorstop 方 法 给 渐变 添加 颜色 ^ 35-12, 35-13 
创建 图 案 调用 createPattern 方 法 ,指定 图 案 文 件 的 来 源 和 重复 方式 35-14、35-15 
保存 和 恢复 绘制 状态 使 用 save 和 restore 方 法 35-16 
在 画布 上 绘制 图 像 使 用 drawImage 方 法 ， 指 定 一 个 img 、canvas 或 video 元 素 作为 来 源 35-17 ~ 35-20 
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35.1 开始 使 用 canvas 元 素 


canvas 元 素 非 常 简单 ， 这 是 指 它 所 有 的 功能 都 体现 在 一 个 JavaScript 对 象 上 ， 因 此 该 元 素 本 身 
只 有 两 个 属性 ， 如 表 35-2 所 示 。 














表 35-2 canvas 元 素 
































元 素 canvas 

元 素 类 型 短语 / 流 

允许 具有 的 父 元 素 任何 能 包含 短语 或 流 元 素 的 元 素 
局 部 属性 height 、width 

内 容 短语 或 流 内 容 

标签 用 法 开始 和 结束 标签 

是 否 为 HTML5 新 增 是 

在 HTML5 中 的 变化 此 处 不 适用 

习惯 样式 无 





canvas 元 素 里 的 内 容 会 在 浏览 器 不 支持 此 元 素 时 作为 备用 内 容 显 示 。 代 码 清 单 35-1 展 示 了 
canvas 元 素 和 一 些 简单 的 备用 内 容 。 


代码 清单 35-1 使 用 带 有 基本 备用 内 容 的 canvas 元 素 


<!DOCTYPE HTML» 





<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: medium double black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas width="500" height="200"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
</body> 
</html> 
你 可 能 已 经 猜 到 了 , width 和 height 属性 指定 了 这 个 元 素 在 屏幕 上 的 大 小 。 从 图 35-1 可 以 看 到 


MEL 文 个 例子 的 〈 当然 ， 现 在 还 没什么 可 看 的 )。 








提示 我 在 这 个 例子 里 给 给 Canvas 元 素 应 用 了 一 个 样式 来 设置 边框 。 否 则 你 是 没有 办 法 在 浏览 器 
窗口 看 到 canvas 的 。 本 章 所 有 的 例子 中 都 会 显示 一 个 边框 ， 这 样 我 描述 的 操作 与 画布 从 
标 之 间 的 关系 就 会 始终 很 清晰 。 
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图 35-1 给 HTML 文档 添加 canvas 元 素 





35.2 ”获取 画布 的 上 下 文 


为 了 在 canvas 元 素 上 绘图 ,我 们 需要 获得 一 个 上 下 文 对 象 ， 这 个 对 象 会 开放 针对 特定 图 形 样 
式 的 绘图 函数 。 我 们 的 案例 会 使 用 2d 上 下 文 ， 它 是 用 来 执行 二 维 操 作 的 。 有 些 浏览 器 提供 了 实验 
性 的 3D 上 下 文 支持 ， 但 仍然 处 于 早期 阶段 。 
通过 在 DOM 里 代表 canvas 元 素 的 对 象 获得 上 下 文 。 表 35-3 介 绍 了 这 个 对 象 : HTMLCanvasElement。 





















































表 35-3 HTMLCanvasElement 对 象 
成 B 说 — HB iR [s] 
height 对 应 于 height 属 性 数值 
width 对 应 于 width 属性 数值 
) 为 画布 返回 绘图 上 下 文 对 象 


getContext (<context> 








其 中 关键 的 方法 是 getContext 。 为 了 获得 二 维 上 下 文 对 象 , 我 们 需要 给 这 个 方法 传递 参数 2d。 


LN 


一 旦 得 到 这 个 上 下 文 ， 就 可 以 开始 绘图 了 。 代 码 清单 35-2 对 此 进行 了 演示 。 


导 
代码 清单 35-2 ”为 画布 获取 二 维 上 下 文 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: medium double black; margin: 4px} 
</style> 
</head> 


<body> 
<canvas id="canvas" width="500" height="100"> 
Your browser doesn't support the <code>canvas</code> element 





</canvas> 
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<script> 
var ctx = document.getElementById("canvas").getContext("2d"); 
ctx. fillRect(10, 10, 50, 50); 
</script> 
</body> 
</html> 


我 突出 显示 了 代码 清单 里 的 关键 语句 。 用 document 对 象 找到 在 DOM 里 代表 canvas 元 素 的 对 
象 , 并 使 用 参数 2d 调 用 了 getContext 方 法 。 本 章 所 有 例子 中 都 会 看 到 这 条 语句 , 或 是 类 似 的 变 体 。 
得 到 上 下 文 对 象 就 可 以 开始 绘图 了 。 在 这 个 例子 中 ， 首 先 调用 fillRect 方 法 ， 它 会 在 画布 上 
绘制 一 个 实心 矩形 。 从 图 35-2 可 以 看 到 这 个 ( 简单 的 ) 效果 。 
f en = ini] 
y © Example E 
€ 3 Q | QOtitan/listings/examplehtml XA 
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图 35-2 ”获取 上 下 文 对 象 并 执行 简单 的 绘图 操作 














35.3 ”绘制 矩形 


让 我 们 从 canvas 对 和 矩形 的 支持 开始 。 表 35-4 介 绍 了 相关 的 方法 ， 所 有 这 些 方 法 都 要 用 在 上 下 
文 对 象 上 ( 而 不 是 画布 本 身 )。 




















提示 我 们 可 以 绘制 更 复杂 的 图 形 ， 但 我 在 第 36 章 之 前 不 会 向 你 展示 如 何 做 。 这 样 我 们 就 能 利 
用 算 形 来 探索 canvas 的 菜 些 功 能 ， 而 不 会 被 其 他 图 形 的 绘制 步骤 所 束 结 。 





表 35-4 ”简单 的 图 形 方法 





























Rom di 明 返 回 
clearRect(x, y, w, h) 清除 指定 的 矩形 void 
fillRect(x, y, w, h) 绘制 一 个 实心 矩形 void 
strokeRect(x, y, w, h) 绘制 一 个 空心 矩形 void 





























所 有 这 三 个 方法 都 需要 四 个 参数 。 前 两 个 ( 如 表格 所 示 的 x 和 y ) 是 从 canvas 元 素 左 上 角 算 起 
的 偏 移 量 。w 和 h 参 数 指 定 了 待 绘制 矩形 的 宽度 和 高 度 。 代码 清单 35-3 展 示 了 fillRect 和 strokeRect 
方法 的 用 法 。 
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代码 清单 35-3 ”使 用 fillRect 和 strokeRect 方 法 


<!DOCTYPE HTML> 


<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
var offset = 10; 
var size = 50; 
var count = 53 
for (var i = 0; i « count; i++) { 
ctx.fillRect(i * (offset + size) + offset, offset, size, size); 
ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size, 
size, size); 
} 
</script> 
</body> 
</html> 


这 个 例子 中 的 脚本 用 fillRect 和 strokeRect 方 法 来 创建 一 系列 实心 和 空心 的 和 矩形。 从 图 35-3 
可 以 看 到 结果 。 
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[35-3 ”绘制 实心 和 空心 的 矩形 


用 这 种 方式 编写 脚本 是 为 了 突出 canvas 元 素 的 编程 本 质 。 使 用 JavaScript 的 for 循 环 绘制 这 些 
矩形。 我 本 可 以 使 用 10 条 独立 的 语句 ， 每 一 条 都 带 有 特定 的 坐标 参数 ,但 是 canvas 的 一 大 乐趣 就 
是 可 以 不 必 这 么 做 。 如 果 你 没有 编程 背景 ， 也 许 会 难以 理解 canvas 的 这 种 特点 。 

clearRect 方 法 会 清除 指定 矩形 里 已 绘制 的 所 有 内 容 。 代 码 清单 35-4 对 此 进行 了 演示 。 
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代码 清单 35-4 ”使 用 clearRect 方 法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 


var offset = 10; 
var size = 50; 
var count = 53 


for (var i = 0; i < count; i++) { 
ctx.fillRect(i * (offset + size) + offset, offset, size, size); 
ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size, 
size, size); 
ctx.clearRect(i * (offset + size) + offset, offset + 5, size, size -10); 


} 


</script> 
</body> 
</html> 
在 这 个 例子 中 , 我 用 clearRect 方 法 清除 了 之 前 被 fillRect 方 法 绘制 过 的 一 片 画布 区 域 。 从 图 
35-4 可 以 看 到 它 的 效果 。 
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图 35-4 ”使 用 clearRect 方 法 











35.4 ”设置 画布 绘制 状态 


绘图 操作 由 绘制 状态 ( drawing state ) 加 以 配置 。 后 者 是 一 组 属性 ， 指 定 了 从 线条 宽度 到 填 
充 色 的 所 有 参数 。 当 我 们 绘制 一 个 图 形 时 ， 就 会 用 到 绘制 状态 的 当前 设置 。 代 码 清 单 35-5 对 此 进 
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行 了 演示 ， 它 使 用 了 linewidth 属 性 ， 此 属性 是 绘制 状态 的 一 部 分 ， 
strokeRect 方 法 生成 的 那些 ) 的 线条 宽度 


代码 清单 35-5 ”在 执行 操作 前 设置 绘制 状态 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="70"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
ctx. lineWidth = 
ctx.strokeRect(10, 10, 50, 50); 
ctx.lineWidth = 4; 
ctx.strokeRect(70, 10, 50, 50); 
ctx.lineWidth = 
ctx. strokeRect(130, 10, 50, 50); 
ctx.strokeRect(190, 10, 50, 50); 
</script> 
</body> 
</html> 





负责 设置 月 


HPA 〈 比如 


当 我 使 用 strokeRect 方 法 时 ，lineWidth 属 性 的 当前 值 就 会 用 于 绘制 矩形 。 在 这 个 例子 中 , 我 
把 这 个 属性 的 值 先后 设 成 2、 aa 这 样 做 的 效果 是 让 和 矩形 的 线条 越 来 越 粗 。 请 注意 我 在 








最 后 两 次 调用 strokeRect 中 间 没 有 改变 这 个 值 。 我 这 么 做 是 为 了 演示 绘制 状态 里 的 属 


各 个 绘图 操作 之 间 发 生变 化 ， UR 
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图 35-5 ”在 各 个 绘图 操作 之 间 改 变 绘制 状态 值 


表 35-5 展 示 了 基本 的 绘制 状态 属性 。 还 有 其 他 一 些 属性 
它们 。 








= 











"E, 我 们 会 在 讨论 更 高 级 的 功能 时 遇 到 
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#35-5 ”基本 的 绘制 状态 属性 



































名 RR 说 HH 默认 值 
fillstyle 获取 或 设置 用 于 实心 图 形 的 样式 black 
lineJoin 获取 或 设置 线条 与 图 形 连 接 时 的 样式 miter 
lineWidth 获取 或 设置 线条 的 宽度 1.0 
strokeStyle 获取 或 设置 用 于 线条 的 样式 black 


35.4.1 设置 线条 连接 样式 


lineJoin 属 性 决定 了 相互 连接 的 线条 应 该 如 何 绘制 ， 它 有 三 个 值 : round、bevel 和 miter， 默 
认 值 是 miter。 代 码 清 单 35-6 展 示 了 这 三 种 样式 的 用 法 。 








代码 清单 35-6 设置 lineJoin 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
ctx.lineWidth = 20; 


ctx.lineJoin = "round"; 
ctx.strokeRect(20, 20, 100, 100); 





ctx.lineJoin = "bevel"; 
ctx.strokeRect(160, 20, 100, 100); 


ctx.lineJoin = "miter"; 
ctx.strokeRect(300, 20, 100, 100); 
</script> 
</body> 
</html> 


我 在 这 个 例子 里 使 用 了 1linewidth 属 性 ， 这 样 strokeRect 方 法 就 会 用 非常 粗 的 线条 来 绘制 矩 
形 ， 随 后 我 依次 使 用 了 每 一 个 lineJoin 样 式 值 。 从 图 35-6 可 以 看 到 它 的 结 
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图 35-6 lineJoin/&f 

















FH 


35.4.2 ”设置 填充 和 笔触 样式 


当 用 fillstyle 或 strokestyle 属 性 设置 样式 时 ， 可 以 用 第 4 章 介绍 的 CSS 颜 色 值 来 指定 一 种 颜 
色 ， 名 称 或 颜色 模型 都 可 以 。 人 代码 清单 35-7 提 供 了 一 个 例子 。 








ni 








代码 清单 35-7 ”用 fillStyle 和 strokeStyle 属 性 设置 颜色 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 





var offset = 10; 

var size = 50; 

var count = 53 

ctx.lineWidth = 3; 

var fillColors = ["black", "grey", "lightgrey", "red", "blue"]; 

var strokeColors - ["rgb(0,0,0)", "rgb(100, 100, 100)", 
"rgb(200, 200, 200)", "rgb(255, 0, 0)", 
"rgb(0, 0, 255)"]; 


for (var i = 0; i < count; i++) { 
ctx.fillStyle - fillColors[i]; 
ctx.strokeStyle - strokeColors[i]; 


ctx.fillRect(i * (offset + size) + offset, offset, size, size); 
ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size, 
size, size); 
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</script> 
</body> 
</html> 


在 这 个 例子 里 ， 我 用 CSS 颜 色 名 和 rgb 模 型 定义 了 两 个 颜色 数组 。 然 后 在 for 循 环 中 把 这 些 颜 


色 指 派 给 fi]15tyle 和 strokeSstyle 属 性 ,并 调用 了 fillRect 和 strokeRect 方 法 。 从 图 35-7 可 以 看 到 
它 的 效果 。 
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图 35-7 用 CSS 颜 色 设 置 填充 与 笔触 样式 





























注意 当然， 任何 带 有 颜色 的 东西 复制 到 黑白 的 印刷 页 上 都 会 有 所 损失 ， 所 以 也 许 你 应 该 在 浏 
览 器 里 载 入 这 个 示例 来 看 看 它 的 效果 。 如 果 你 打算 这 么 做 ， 可 以 从 apress.com 上 免费 下 载 
这 本 书 的 所 有 代码 示例 。 


35.4.3 ”使 用 渐变 


除了 纯色 , 我 们 还 可 以 把 填充 和 笔触 样式 设置 成 渐变 色 。 渐变 是 两 种 或 更 多 颜色 之 间 的 渐进 
转变 。canvas 元 素 支 持 两 类 渐变 : 线性 和 径 向 ， 表 35-6 介 绍 了 所 需 的 方法 。 


2566 A cm 








名 称 说 OB & E 
createlinearGradient(xO, yO, x1, y1) 创建 线性 渐变 CanvasGradient 
createRadialGradient(x0, yO, rO, x1, y1, r1) 创建 径 向 渐变 CanvasGradient 


这 两 个 方法 都 返回 一 个 CanvasGradient 对 象 ， 它 定义 了 表 35-7 里 展示 的 方法 。 其 中 的 参数 描 
述 了 渐变 使 用 的 线条 或 圆 ， 我 会 在 下 面 的 例子 里 进行 解释 。 
表 35-7 CanvasGradient 的 方法 


名 i 说 明 返 E 
addColorStop(<position>, <color>) 给 渐变 的 梯度 线 添 加 一 种 纯色 void 
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1. 使 用 线性 渐变 

线性 渐变 (linear gradient ) 指 的 是 沿 着 一 条 线 设 定 要 用 的 若干 颜色 。 代 码 清单 3$-8 展 示 了 如 
何 创 建 一 个 简单 的 线性 渐变 。 
代码 清单 35-8 ”创建 线性 渐变 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
var grad = ctx.createLinearGradient(0, 0, 500, 140); 
grad.addColorStop(0, "red"); 
grad.addColorStop(0.5, "white"); 
grad.addColorStop(1, "black"); 
ctx.fillStyle - grad; 
ctx.fillRect(O, 0, 500, 140); 
«/script» 
«/body» 
«/html» 





使 用 createlinearGradient 方 法 时 , 提供 的 四 个 值 会 作为 画布 上 一 条 线段 的 开始 和 结束 坐标 。 
在 这 个 例子 里 ,我 用 坐标 描述 了 一 条 开始 于 (0, 0)， 结 束 于 (500, 140) 的 线段 。 这 些 点 分 别 对 应 画 
布 的 左上 角 和 右 下 角 ， 如 图 35-8 所 示 。 


(0,0) 





(500,140) 


图 35-8 ”线性 渐变 中 的 线段 








这 条 线 就 代表 了 渐变 ,现在 我 们 可 以 在 createLinearGradient 方 法 返回 的 CanvasGradient 上 使 
用 addColorstop 方 法 ， 沿 着 梯度 线 添加 各 种 颜色 了 ， 就 像 这 样 : 


grad.addColorStop(0, "red"); 
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grad.addColorStop(0.5, "white"); 
grad.addColorStop(1, "black"); 

















addColorStop 方 法 的 第 一 个 参数 是 我 们 想 要 在 线段 上 应 用 颜色 的 位 置 ， 颜 色 则 由 第 二 个 参数 
指定 。 线 段 的 起 点 ( 在 这 个 例子 中 是 坐标 (0, 0) ) 由 0 这 个 值 代表 ，1 则 代表 终点 。 在 这 个 例子 里 ， 
我 告诉 canvas 我 想 让 red (红色 ) 处 于 线段 起 点 ，white (白色 ) 处 于 线段 中 点 ， 而 black ( 黑色 ) 
处 于 线段 终点 。 然 后 画布 会 计算 出 如 何在 这 些 点 上 逐渐 转变 这 些 颜 色 。 我 们 想 指 定 多 少 个 颜色 点 
都 可 以 〈 但 如 果 我 们 太 过 投入 ， 得 到 的 就 会 是 像 彩虹 那样 的 东西 了 )。 

定义 渐变 并 添加 颜色 点 之 后 ， 就 可 以 用 CanvasGradient 对 象 来 设置 fijllstyle 或 strokestyle 
届 性 了 ， 就 像 这 样 : 


ctx.fillStyle = grad; 

















最 后 ， 我 们 可 以 绘制 一 个 图 形 。 在 这 个 例子 里 ， 我 绘制 了 一 个 实心 的 和 矩形， 就 像 这 样 : 
ctx.fillRect(O, 0, 500, 140); 
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图 35-9 ”在 实心 矩形 里 使 用 线性 渐变 











可 以 看 到 颜色 顺 着 渐变 线 变化 。 左 上 角 是 纯 红色 ， 中 央 是 纯 白 色 , 左下 角 是 纯 黑 色 。 在 这 些 
点 之 间 ， 颜 色 是 逐渐 变化 的 。 


2. 在 更 小 的 图 形 里 使 用 线性 渐变 
我 们 在 定义 梯度 线 时 要 相对 于 画布 进行 设置 , 而 不 是 绘制 的 图 形 。 这 一 点 经 常会 在 初期 造成 
混淆 。 代 码 清单 35-9 演 示 了 我 所 表达 的 意思 。 









































代码 清单 35-9 ”在 不 填 满 画布 的 图 形 中 使 用 渐变 
«IDOCTYPE HTML» 
«html» 
«head» 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
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<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 


var grad = ctx.createLinearGradient(0, 0, 500, 140); 
grad.addColorStop(0, "red"); 

grad.addColorStop(0.5, "white"); 
grad.addColorStop(1, "black"); 


ctx.fillStyle - grad; 
ctx.fillRect(10, 10, 50, 50); 
«/script» 
</body> 
</html> 


对 这 个 例子 的 改动 只 是 让 和 矩形 变 小 。 从 图 35-10 可 以 看 到 结果 。 
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图 35-10 ”失去 变化 的 渐变 











这 就 是 我 说 的 梯度 线 相对 于 画布 的 意思 。 我 在 一 个 纯 红色 区 域 里 绘制 了 这 个 矩形 。( 事实 上 ， 
如 果 我 们 能 靠 得 足 够 近 ， 也 许可 以 觉察 颜色 略微 向 白色 过 渡 ， 但 外 观 整 体 上 是 纯色 的 。) 最 好 的 
理解 方式 是 : 我 们 绘制 图 形 时 其 实 是 让 底下 的 一 部 分 渐变 显露 了 出 来 。 这 就 意味 着 必须 思考 梯度 









































线 如 何 对 应 将 要 显露 的 区 域 。 代 码 清 单 35-10 展 示 了 如 何 针对 图 形 来 设置 梯度 线 。 
代码 清单 35-10 ”让 梯度 线 匹配 想 要 的 图 形 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
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Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 

var ctx = document.getElementById("canvas").getContext ("2d"); 


var grad = ctx.createLinearGradient(10, 10, 60, 60); 
grad.addColorStop(0, "red"); 

grad.addColorStop(0.5, "white"); 
grad.addColorStop(1, "black"); 


ctx.fillStyle - grad; 
ctx.fillRect(0, 0, 500, 140); 
«/script» 
«/body» 
«/html» 


在 这 个 例子 里 , 我 对 梯度 线 进行 了 设置 , 使 它 开 始 和 终止 于 我 想 用 小 矩形 显露 出 的 区 域 之 内 。 
但 是 ,我 绘制 了 显露 全 部 渐变 的 和 矩形， 这样 你 就 可 以 看 到 改动 产生 的 效果 了 ， 如 图 35-11 所 示 。 
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图 35-11 移动 和 缩短 梯度 线 的 效果 


可 以 看 到 渐变 色 如 何 转移 到 了 将 用 小 和 矩形 显露 出 的 区 域内 。 最 后 一 步 是 计算 形 匹配 渐变 , 如 
代码 清单 35-11 所 示 。 


代码 清单 35-11 使 图 形 匹 配 渐变 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
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var grad = ctx.createLinearGradient(10, 10, 60, 60); 
grad.addColorStop(0, "red"); 

grad.addColorStop(0.5, "white"); 
grad.addColorStop(1, "black"); 


ctx.fillStyle - grad; 
ctx.fillRect(10, 10, 50, 50); 
</script> 
</body> 
</html> 


提示 请 注意 ， 我 在 createLinearGradient 参 数 里 使 用 的 数值 和 在 fil1Rect 参 数 里 使 用 的 有 所 不 
同 。createLinearGradient 的 值 代表 画布 里 的 一 组 坐标 ， 而 fillRect 的 值 代 表 了 短 形 相对 
于 单个 坐标 点 的 宽度 和 高 度 。 如 果 你 发 现 渐 变 和 图 形 没 有 对 齐 ， 这 可 能 就 是 导致 问题 的 
原因 。 


现在 ， 图 形 和 渐变 已 经 完美 对 齐 了 ， 如 图 35-12 所 示 。 当 然 ， 我 们 并 不 总 是 想 让 它们 完美 对 
齐 。 我们 可 能 想 要 显露 出 较 大 渐变 里 的 特定 区 域 来 获得 不 同 的 效果 。 无论 目的 是 什么 , 重要 的 是 
要 理解 手头 上 的 渐变 和 图 形 之 间 的 关系 。 


r 











aS) 
© Example Vs 


€ - Q | Otitan/listings/example.htm wit 























135-12 对齐 图 形 和 渐变 





35.4.4 ”使 用 径 向 渐变 


我 们 用 两 个 圆 定义 径 向 渐变 。 渐 变 的 起 点 由 第 一 个 圆 定义 ,终点 则 是 第 二 个 圆 , 在 两 者 之 间 
添加 颜色 点 。 代 码 清单 35-12 提 供 了 一 个 例子 。 


代码 清单 35-12 ”使 用 径 向 渐变 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
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<style> 


canvas {border: thin solid black; margin: 4px} 
</style> 


</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 


Your browser doesn't support the <code>canvas</code> element 
</canvas> 


<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 


var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100); 
grad.addColorStop(0, "red"); 


grad.addColorStop(0.5, "white"); 
grad.addColorStop(1, "black"); 


ctx.fillStyle - grad; 
ctx.fillRect(O, 0, 500, 140); 
«/script» 
</body> 
</html> 
createRadialGradient 方 法 的 六 个 参数 分 别 代 表 : 
口 起 点 圆 的 圆心 坐标 〈 第 一 个 和 第 二 个 参数 ) 
口 起 点 圆 的 半径 ( 第 三 个 参数 ) 
口 终点 圆 的 圆心 坐标 〈 第 四 个 和 第 五 个 参数 ) 
a 终点 圆 的 半径 〈 第 六 个 参数 ) 
图 35-13 展 示 了 用 例子 里 的 值 生成 的 起 点 圆 和 终点 圆 。 请 注意 ， 我 们 可 以 指定 画布 之 外 的 渐 
AR (这 人 句 话 对 线性 渐变 同样 适用 )。 
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图 35-13” 径 向 渐变 里 的 起 点 圆 和 终点 圆 
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在 这 个 例子 里 , 起 点 圆 较 小 , 被 终点 圆 所 包围 。 当 我 们 给 这 个 渐变 添加 颜色 点 时 ,它们 会 被 
放置 在 起 点 圆 边界 〈 该 点 的 值 为 0.0 ) 和 终点 圆 边 界 (该 点 的 值 为 1.0 ) 之 间 的 一 条 线段 上 。 


提示 “ 当 你 设 定 的 一 个 圆 与 另 一 个 不 存在 包含 关系 时 要 小 心 。 各 种 浏览 器 对 于 如 何 开 始 渐变 存 
在 不 一 致 性 ， 结 果 也 很 混乱 。 
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因为 我 们 可 以 指定 这 两 个 圆 的 位 置 , 所 以 圆 边界 之 间 的 距离 可 能 会 有 变化 , 颜色 之 间 的 渐变 
速度 也 会 不 同 。 从 图 35-14 可 以 看 到 它 的 效果 。 
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图 35-14 ”使 用 较 小 的 图 形 和 径 向 渐变 














这 张 图 展示 了 整个 渐变 ， 但 是 渐变 与 绘制 图 形 之 间 的 对 应 方式 适用 于 同样 的 规则 。 代 码 清 
单 35-13 创 建 了 一 对 较 小 的 图 形 ， 它 们 显露 出 了 渐变 的 子 区 域 。 


代码 清单 35-13 ”使 用 较 小 的 图 形 和 径 向 渐变 


<!DOCTYPE HTML> 














<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100); 
grad.addColorStop(0, "red"); 
grad.addColorStop(0.5, "white"); 
grad.addColorStop(1, "black"); 
ctx.fillStyle - grad; 
ctx.fillRect(150, 20, 75, 50); 
ctx.lineWidth - 8; 
ctx.strokeStyle - grad; 
ctx.strokeRect(250, 20, 75, 50); 
</script> 
</body> 


</html> 
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请 注意 我 可 以 同时 将 渐变 用 于 fillstyle 和 strokestyle 属 性 ， 这 让 我 们 不 仅 能 将 渐变 用 在 实 
心 图 形 上 ， 还 能 够 用 于 线条 ， 如 图 35-15 所 示 。 
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图 35-15 ”将 径 向 渐变 同时 用 于 填充 和 笔触 
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除了 纯色 和 渐变 之 外 ， 我 们 还 可 以 创建 图 案 (pattern )。 具 体 做 法 是 使 用 画布 上 下 文 对 象 所 
定义 的 createPattern 方 法 。2D 绘 图 上 下 文 定义 了 对 三 种 图 案 类 型 的 支持 : 图 像 、 视 频 和 画布 。 
但 是 只 有 图 像 得 以 实现 ( 而 且 只 在 Firefox 和 Opera 浏 览 器 中 。 在 本 书 编写 过 程 中 ， 其 他 浏览 器 会 
忽略 这 个 图 案 类 型 )。 

要 将 图 像 作为 图 案 ， 需 要 把 一 个 HTMLImageElement 对 象 作为 第 一 个 参数 传递 给 createPattern 
方法 。 第 二 个 参数 是 重复 样式 ， 它 的 值 必须 是 表 35-8 中 的 一 个 。 
































表 35-8 ”图案 的 重复 值 

































































a 说 明 
ere 图 像 应 当 被 垂直 和 水 平 重复 
SR 四 像 应 当 被 水 平 重复 
reed 图 像 应 当 被 垂直 重复 
Mee 轨 像 在 图 案 里 不 应 当 被 重复 




















代码 清单 35-14 展 示 了 如 何 创建 和 使 用 图 像 类 型 的 图 案 。 
代码 清单 35-14 ”使 用 图 像 类 型 的 图 案 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
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<body> 

<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 

</canvas> 

<img id="banana" hidden src="banana-small.png"/> 

<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
var imageElem = document.getElementById("banana"); 


var pattern = ctx.createPattern(imageElem, "repeat"); 


ctx. fillStyle = pattern; 
ctx. fillRect(0, 0, 500, 140); 
</script> 
</body> 
</html> 


这 个 例子 里 的 文档 包含 一 个 ing 元素 ， 它 对 用 户 是 不 可 见 的 ， 因 为 我 应 用 了 hidden 属 性 (第 4 
章 介 绍 过 )。 在 脚本 中 ， 我 用 DOM 定 位 了 代表 img 元 素 的 HTMLImageElement 对 象 ， 并 将 它 作为 
createPattern 方 法 的 第 一 个 参数 。 我 对 第 二 个 参数 使 用 了 repeat 这 个 值 , 使 图 像 在 两 个 方向 上 都 
AURA. 最 后 , 将 这 个 图 案 设 为 fillstyle 属 性 的 值 ， 并 使 用 人]1lRect 方 法 绘制 了 一 个 大 小 与 画布 
相当 的 实心 矩形 。 从 图 3$-16 可 以 看 到 它 的 结果 。 
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图 35-16 ”创建 图 像 类 型 的 图 案 


这 个 图 案 复制 的 是 img 元 素 的 当前 状态 ， 这 就 意味 着 即使 我 们 用 JavaScript 和 DOM 修 改 了 img 
元 素 src 属 性 的 值 ， 此 图 案 也 不 会 改变 。 

和 渐变 一 样 , 这 个 图 案 会 应 用 到 整 张 画 布 上 , 由 我 们 来 决定 网 案 的 哪些 部 分 将 通过 我 们 绘制 
的 图 形 显 露出 来 。 代 码 清单 35-15 展 示 了 将 图 案 用 于 较 小 的 填充 和 笔触 图 形 上 。 


代码 清单 35-15 ”使 用 较 小 的 图 形 与 图 像 类 型 的 图 案 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
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canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<img id="banana" hidden src="banana-small.png"/> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
var imageElem = document.getElementById("banana"); 


var pattern = ctx.createPattern(imageElem, "repeat"); 


ctx.fillStyle = pattern; 
ctx.fillRect(150, 20, 75, 50); 


ctx.lineWidth - 8; 
ctx.strokeStyle - pattern; 
ctx.strokeRect(250, 20, 75, 50); 

















«/script» 
</body> 
</html> 
可 以 从 图 35-17 看 到 它 的 结 
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图 35-17 ”使 用 较 小 的 图 形 与 图 像 类 型 的 图 案 








35.5 ”保存 和 恢复 绘制 状态 
可 以 用 表 35-9 中 介绍 的 方法 保存 绘制 状态 ， 稍 后 再 返回 。 
表 35-9 保存 和 恢复 状态 











值 说 — HB 
save() 保存 绘制 状态 属性 的 值 ， 并 把 它们 推 入 状态 栈 








restore() 取出 状态 栈 的 第 一 组 值 ， 用 它们 来 设置 绘制 状态 
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绘制 状态 保存 时 会 被 存放 在 一 个 后 进 先 出 (LIFO ) 的 栈 中 , 意思 是 我 们 用 save 方 法 最 后 保存 
的 状态 会 被 restore 方 法 首先 进行 恢复 ， 代 码 清单 35-16 展 示 了 这 些 方法 的 用 法 。 


代码 清单 35-16 保存 和 恢复 状态 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140" preload="auto"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<div> 
<button>Save</button> 
<button>Restore</button> 
</div> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 








var grad = ctx.createLinearGradient(500, 0, 500, 140); 
grad.addColorStop(0, "red"); 

grad.addColorStop(0.5, "white"); 

grad.addColorStop(1, "black"); 


var colors - ["black", grad, "red", "green", "yellow", "black", "grey"]; 


var cIndex = 0; 
ctx.fillStyle - colors[cIndex]; 
draw(); 


var buttons = document.getElementsByTagName("button") ; 

for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 

} 


function handleButtonPress(e) { 
switch (e.target.innerHTML) { 

case 'Save': 
ctx.save(); 
cIndex = (cIndex + 1) % colors.length; 
ctx. fillstyle = colors[cIndex]; 
draw(); 
break; 

case 'Restore': 
cIndex = Math.max(0, cIndex -1); 
ctx.restore(); 
draw(); 
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break; 


} 

} 

function draw() { 
ctx.fillRect(0, 0, 500, 140); 

] 

«/script» 
«/body» 
</html> 


在 这 个 例子 里 ， 我 定义 了 一 个 包含 CSS 颜 色 名 的 数组 和 一 个 线性 渐变 。 当 Save〈 保存 ) 按钮 
被 按 下 就 会 用 save 方 法 保存 当前 的 绘制 状态 。 当 Restore (恢复 ) 按钮 被 按 下 ， 之 前 的 绘制 状态 
就 会 被 恢复 。 无 论 哪个 按钮 被 按 下 都 会 调用 draw 困 数 ， 它 会 用 fillRect 方 法 绘制 一 个 实心 矩形 。 
fillStyle 属 性 会 在 数组 里 来 回 移动 ， 并 在 按钮 被 点 击 时 进行 保存 与 恢复 ， 因 为 这 个 属性 是 绘制 
状态 的 一 部 分 。 从 图 35-18 可 以 看 到 它 的 效果 。 
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[e] 
图 35-18 ”保存 和 恢复 绘制 状态 


画布 里 的 内 容 不 会 被 保存 或 恢复 ,只 有 绘制 状态 的 属性 值 才 会 。 它 们 包括 我 们 在 这 一 章 里 见 


过 的 属性 ， 如 1ineWidth、fillStyle 和 strokeStyle， 以 及 我 将 在 第 36 章 介绍 的 一 些 额 外 属性 。 


35.6 ”绘制 图 像 


可 以 用 drawImage 方 法 在 画布 上 绘制 图 像 。 这 个 方法 需要 三 个 、 五 个 或 九 个 参数 。 第 一 个 参 
数 始 终 是 图 像 的 来 源 ， 它 可 以 是 代表 img、video 或 其 他 canvas 元 素 的 DOM 对 象 。 代 码 清单 35-17 
提供 了 一 个 例子 ， 里面 使 用 一 个 ijmg 元 素 作为 来 源 。 


代码 清单 35-17 使 用 drawImage 方 法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black; margin: 4px} 
</style> 
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</head> 
<body> 
<canvas id="canvas" width="500" height="140" preload="auto"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<img id-"banana" hidden src-"banana-small.png"/» 
«script» 
var ctx = document.getElementById("canvas").getContext("2d"); 
var imageElement = document.getElementById("banana"); 


ctx.drawImage(imageElement, 10, 10); 
ctx.drawImage(imageElement, 120, 10, 100, 120); 
ctx.drawImage(imageElement, 20, 20, 100, 50, 250, 10, 100, 120); 
«/script» 
</body> 
</html> 


使 用 三 个 参数 时 , 第 二 个 和 第 三 个 参数 给 出 了 图 像 应 当 在 画布 上 绘制 的 坐标 。 图 像 按照 它 原 
始 的 宽度 和 高 度 进行 绘制 。 使 用 五 个 参数 时 ， 额 外 的 参数 指定 了 应 当 给 图 像 绘制 的 宽度 和 高 度 ， 
以 代替 原始 尺寸 。 
使 用 九 个 参数 时 : 
口 第 二 个 和 第 三 个 参数 是 在 源 图 像 内 的 偏 移 量 ; 
口 第 四 个 和 第 五 个 参数 是 源 图 像 所 需 使 用 区 域 的 宽度 和 高 度 ; 
口 第 六 个 和 第 七 个 参数 指定 了 所 选区 域 的 左上 角 将 要 在 画布 上 绘制 的 坐标 ; 
口 第 八 个 和 第 九 个 参数 指定 了 所 选区 域 将 要 绘制 的 宽度 和 高 度 。 
从 图 35-19 可 以 看 到 这 些 参数 的 效果 。 
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135-19 ”绘制 图 像 








35.6.1 ”使 用 视频 图 像 


我 们 可 以 用 video 元 素 作 为 drawImage 方 法 的 图 像 来 源 。 这 么 做 其 实 是 对 视频 做 了 截图 。 代 码 
清单 35-18 对 此 进行 了 演示 。 
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代码 清单 35-18 使 用 视频 作为 drawImage 方 法 的 来 源 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float:left; } 
</style> 
</head> 
<body> 
<video id="vid" src="timessquare.webm" controls preload="auto" 
width="360" height="240"> 
Video cannot be displayed 
</video> 
<div> 
<button id="pressme">Snapshot</button> 
</div> 
<canvas id="canvas" width="360" height="240"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
var imageElement = document.getElementById("vid"); 


document.getElementById("pressme").onclick = function(e) { 
ctx.drawImage(imageElement, 0, 0, 360, 240); 
j 


«/script» 
«/body» 
«/html» 


这 个 例子 中 有 一 个 video 元 素 、 一 个 button 和 一 个 canvas 元 素 。 按 下 按钮 后 ， 当 前 的 视频 帧 会 
被 drawImage 方 法 用 来 描绘 桌面 。 从 图 35-20 可 以 看 到 结果 。 








© Example - 
€ > © QOtitan/listings/examplehtn wat 





























135-20 ”使 用 一 段 视 频 作为 canvas drawImage 方 法 的 来 源 


观看 各 种 HTMLS 演 示 时 ， 经 常会 见 到 canvas 被 用 来 在 视频 上 绘图 。 这 就 是 用 我 刚才 向 你 展 





758 第 35 章 使 用 canvas 元 素 ( 第 工 部 分 ) 




















示 的 技巧 ， 再 加 上 一 个 计时 器 〈 例 如 第 27 章 介绍 过 的 那些 ) 实现 的 。 代 码 清单 35-19 展 示 了 怎样 
结合 使 用 它们 。 我 不 是 特别 喜欢 这 种 技巧 。 如 果 你 想 知 道 为 什么 ， 只 需要 去 看 看 显示 这 类 文档 的 


























机 器 上 的 CPU 负载 就 知道 了 。 
代码 清单 35-19 ”用 canvas 显 示 视 频 并 在 上 面 绘图 


<!DOCTYPE HTML> 





<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float:left; } 
</style> 
</head> 
<body> 
<video id="vid" hidden src="timessquare.webm" preload="auto" 
width="360" height="240" autoplay></video> 
«canvas id-"canvas" width="360" height="240"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
var imageElement = document.getElementById("vid"); 
var width = 100; 
var height = 10; 
ctx.lineWidth = 5; 
ctx.strokeStyle = "red"; 
setInterval(function() { 
ctx.drawImage(imageElement, 0, 0, 360, 240); 
ctx.strokeRect(180 - (width/2),120 - (height/2), width, height); 
}, 25); 
setInterval(function() { 
width = (width + 1) % 200; 
height = (height + 3) % 200; 
}, 100); 
</script> 
</body> 
</html> 





在 这 个 例子 里 ， 我 给 一 个 video 元 素 应 用 了 hidden 属 性 ， 使 它 对 用 户 不 可 见 。 我 用 了 两 个 计 
Wigs: 第 一 个 每 25 毫 秒 触发 一 次 ， 它 会 绘制 当前 的 视频 帧 并 添上 一 个 空心 矩形 。 第 二 个 计时 器 每 
100 毫 秒 触发 一 次 ， 它 会 改变 矩形 所 使 用 的 值 。 实 现 的 效果 是 矩形 会 改变 大 小 ， 并 且 和 去 加 在 视频 
图 像 之 上 。 图 35-21 可 以 让 你 有 个 大 致 的 感受 ,但 要 真正 领会 所 发 生 的 一 切 ， 应 该 把 示例 文档 加 





























载 到 浏览 絮 里 。 





35.6 HAR 759 








[EST 
© Example © © Exemple ` e | © Example Y: 
€ > Q Otian/iistings/exad| € 3 © Q titan/iistings/exampleh|| € -> C © titan/listings/example.htm! wf 





























图 35-21 PAPER aie Ce i Ais Esc BER I DUAE 


像 这 样 操作 video 元 素 时 无 法 使 用 内 置 控件 。 我 为 了 让 示例 保持 简单 而 使 用 了 autoplay 属 
但 更 有 用 的 解决 方式 是 实现 第 34 章 中 的 自 定 义 控件 。 


35.6.2 ”使 用 画布 图 像 
我 们 可 以 将 一 张 画布 的 内 容 作为 另 一 张 里 drawImage 方 法 的 来 源 ， 如 代码 清单 35-20 所 示 。 
代码 清单 35-20 ”将 画布 作为 drawImage 方 法 的 来 源 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float:left; } 
</style> 
</head> 
<body> 
<video id="vid" hidden src="timessquare.webm" preload="auto" 
width="360" height="240" autoplay></video> 
<canvas id="canvas" width="360" height="240"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<div> 
<button id="pressme">Press Me</button> 
</div> 
<canvas id="canvas2" width="360" height="240"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var srcCanvasElement = document.getElementById("canvas") ; 
var ctx = srcCanvasElement.getContext ("2d"); 
var ctx2= document.getElementById("canvas2").getContext("2d") ; 
var imageElement = document.getElementById(" vid"); 
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document .getElementById("pressme").onclick = takeSnapshot; 

var width = 100; 

var height = 

ctx.lineWidth = 

ctx.strokeStyle = "red"; 

ctx2.lineWidth = 30; 

ctx2.strokeStyle = "black;" 

setInterval(function() { 
ctx.drawImage(imageElement, 0, 0, 360, 240); 
ctx.strokeRect(180 - (width/2),120 - (height/2), width, height); 

}, 25) 

setInterval(function() { 
width = (width + 1) % 200; 
height = (height + 3) % 200; 

}, 100); 

function takeSnapshot() { 
ctx2.drawImage(srcCanvasElement, 0, 0, 360, 240); 
ctx2.strokeRect(0, 0, 360, 240); 

} 

</script> 
</body> 
</html> 








在 这 个 例子 里 ， 我 添加 了 第 二 个 canvas 元 素 和 一 个 button。 当 按钮 被 按 下 时 ， 我 把 代表 原 
canvas ff HTMLCanvasElement 对象 作为 第 一 个 参数 ， 用 于 调用 第 二 个 canvas 上 下 文 对 象 上 的 
drawImage 方 法 。 本 质 上 ， 点 击 按钮 会 给 左边 的 画布 截图 ， 并 将 它 显示 在 右边 的 画布 上 。 我 们 会 
复制 画布 上 的 一 切 , 包括 又 加 的 红色 方 框 。 还 可 以 执行 进一步 的 绘图 操作 ， 所 以 我 给 第 二 张 夯 布 





绘制 了 一 


f 























个 黑色 的 粗 边框 作为 截图 的 一 部 分 。 从 图 35-22 可 以 看 到 它 的 效果 。 
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使 用 一 张 画 布 作 为 另 一 张 画布 上 drawImage 方 法 的 来 源 
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35.7 ”小结 





在 这 一 章 里 ,我 介绍 了 canvas 元 素 ， 展 示 了 如 何 绘制 基本 图 形 ， 如 何 配置 、 保 存 和 恢复 绘 





制 状 态 , 以 及 如 何在 绘图 操作 中 使 用 纯色 和 渐变 。 我 还 展示 了 如 何 用 img、video 或 其 他 canvas 





元 素 的 内 容 作 为 来 源 绘制 图 像 。 第 36 章 会 向 你 展示 如 何 
效 和 变换 。 


给 





ZI 


判 更 复杂 的 图 形 ， 以 及 如 何 应 用 特 





使 用 canvas 元 索 (第 上 部 分 ) 











在 这 一 章 里 ， 我 会 继续 介绍 canvas 元 素 的 功能 ， 展 示 如 何 绘 制 更 复杂 的 图 形 ( 包括 圆 弧 和 
曲线 ), 如何 使 用 裁剪 区 域 (clipping region ) 来 限制 操作 以 及 如 何 绘制 文本 。 我 还 会 介绍 可 以 应 
透明 度 、 旋 转 和 坐标 重 映射 。 表 36-1 提 供 了 本 章 内 容 











用 在 画布 上 的 特效 和 变换 ， 包 括 阴 影 、 














































































































概要 。 
表 36-1 本章 内 容 概要 
问 题 解决 方案 代码 清单 
] 线 条 绘制 图 形 更 用 beginpath 、moveTo、1lineTo 和 可 选 的 closepPath 方 法 36-1 
设置 用 于 绘制 线条 末端 的 样式 设置 lineCap 属 性 36-2 
绘制 作为 路 径 一 部 分 的 矩形 喝 用 rect 方 法 36-3, 36-4 
绘制 圆 弧 使 用 arc 或 arcTo 方 法 36-5 ~ 36-7 
绘制 三 次 或 二 次 贝 塞 尔 曲线 更 用 bezierCurveTo 或 quadraticCurveTo 方 法 36-8, 36-9 
把 绘图 操作 的 效果 限制 在 画布 的 特定 区 域内 ”使 用 clip 方 法 36-10 
在 画布 上 绘制 文本 和 更 用 fillText 或 strokeText 方 法 36-11 
给 文本 或 图 形 添加 阴影 更 用 阴影 属性 36-12 
设置 总 体 透明 度 值 史 用 globalAlpha 属 性 36-13 
设置 合成 样式 iti Fg obal CompositeOperationlm PE 36-14 
变换 画布 更 用 某 一 种 变换 方法 ， 如 rotate 或 scale 36-15 


36.1 用 路 径 绘图 























第 35 章 的 示例 都 依靠 绘制 矩形 实现 。 和 矩形 是 一 种 有 用 的 图 形 , 但 我 们 有 时 候 需要 用 到 的 是 其 


他 图 形 。 幸 好 ，canvas 元 素 和 它 的 上 下 文 提供 





了 一 组 方法 ， 让 我 们 能 用 路 径 (path ) 


绘制 图 形 。 





路 径 本 质 上 是 一 组 独立 的 线条 【被 称 为 子路 径 )， 它 们 组 合 到 一 起 构成 图 形 。 我 们 绘制 子路 径 的 
方式 就 像 用 笔 在 纸 上 夯 图 一 样 , 笔尖 不 离开 纸 面 : 画布 上 的 每 一 条 子路 径 都 以 上 一 条 的 终点 作为 
起 点 。 表 36-2 展 示 了 绘制 基本 路 径 的 可 用 方法 。 


36.1 用 路 径 绘图 763 





表 36-2 基本 路 径 方 法 
















































































名 A 说 ĦA 返 E 
beginPath() 开始 一 条 新 路 径 void 
closePath() 尝试 闭合 现 有 路 径 ， 方 法 是 绘制 一 条 线 ， 连 接 最 后 那 条 线 的 终点 与 初始 坐标 void 
fill() 填充 用 子路 径 描述 的 图 形 void 
isPointInPath(x, y) ”如 果 指 定 的 点 在 当前 路 径 所 描述 的 图 形 之 内 则 返回 true 布尔 值 
lineTo(x, y) 绘制 一 条 到 指定 坐标 的 子路 径 void 
moveTo(x, y) 移动 到 指定 坐标 而 不 绘制 子路 径 void 
rect(x, y, w, h) 绘制 一 个 和 矩形， 其 左上 角 位 于 (x, y)， 宽 度 是 w， 高 度 是 有 void 
stroke() 给 子路 径 描 述 的 图 形 绘 制 轮廓 线 void 




















绘制 一 条 路 径 的 基本 顺序 如 下 : 

口 调用 beginPath 方 法 ; 

口 用 moveTo 方 法 移动 到 起 点 ; 

口 用 arc 和 1lineTo 等 方法 绘制 子路 径 ; 

口 调用 closepPath 方 法 (可 选 ); 

口 调用 fil11 或 stoke 方 法 。 

下 一 节 会 向 你 展示 如 何 用 不 同 的 子路 径 方法 实现 这 一 顺序 。 














36.1.1 用 线条 绘制 路 径 
最 简单 的 路 径 是 那些 由 直线 所 组 成 的 。 代 码 清 单 36-1 对 此 进行 了 演示 。 
代码 清单 36-1 由 直线 创建 路 径 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float: left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 














ctx.fillStyle = "yellow"; 
ctx.strokeStyle - "black"; 
ctx.lineWidth - 4; 
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ctx.beginPath(); 
ctx.moveTo(10, 10); 
ctx.lineTo(110, 10); 
ctx.lineTo(110, 120); 
ctx.closePath(); 

ctx. fill(); 


ctx.beginPath(); 

ctx.moveTo(150, 10); 
ctx.lineTo(200, 10); 
ctx.lineTo(200, 120); 
ctx.lineTo(190, 120); 


ctx. fill(); 
ctx.stroke(); 


ctx.beginPath(); 
ctx.moveTo(250, 10); 
ctx.lineTo(250, 120); 














ctx.stroke(); 
</script> 
</body> 
</html> 
在 这 个 例子 里 ， 我 创建 了 三 条 路 径 。 从 图 36-1 可 以 看 到 它们 在 画布 上 的 样子 。 
[ ESI, 
© Example ` s 
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图 36-1 用 1lineTo 方 法 创建 简单 的 路 径 


对 于 第 一 条 路 径 , 我 明确 地 绘制 了 两 条 线 , 然后 使 用 closePath 方 法 。 这样 canvas 就 会 闭合 路 
径 。 然 后 我 调用 了 人 11 方 法 ， 用 人 fillstyle 属 性 所 指定 的 样式 填充 了 这 个 图 形 (我 在 这 个 例子 里 
使 用 的 是 纯色 ， 但 也 可 以 使 用 第 35 章 介绍 过 的 所 有 渐变 和 图 案 )。 

对 于 第 二 个 图 形 ,我 指定 了 三 条 子路 径 ， 但 没有 闭合 图 形 。 可 以 看 到 我 调用 了 fil1 和 stroke 
这 两 个 方法 来 给 图 形 填 色 , 并 沿 着 路 径 绘制 了 一 条 线 。 请 注意 填充 色 的 绘制 方式 就 像 图 形 已 经 闭 
合 了 那样 。canvas 元 素 会 假定 存在 一 条 从 终点 到 起 点 的 子路 径 , 然后 借助 它 填充 图 形 。 相 比 之 下 ， 
stToke 方 法 只 会 沿 着 已 经 定义 的 子路 径 。 
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提示 对 于 第 二 个 图 形 , 我 在 stroke 方 法 之 前 先 调用 了 位 11 方 法, 这 会 使 canvas 先 用 纯色 填充 图 
形 ， 然 后 再 沿 着 路 径 绘 制 线条 。 如 果 1lineWidth 属 性 大 于 1 并 且 我 们 先 调用 了 stroke 方 法 ， 
得 到 的 视觉 效果 就 会 有 所 不 同 。 更 宽 的 线条 会 在 路 径 两 侧 绘制 ， 因 此 线条 的 一 部 分 会 在 
调用 fi11 方 法 时 被 遮盖 ， 导 致 线条 的 宽度 变 罕 。 








对 于 第 三 个 图 形 , 我 只 是 简单 地 在 两 点 之 间 绘 制 了 一 条 线 ， 因 为 路 径 不 一 定 需要 包含 多 条 子 
路 径 。 我 们 在 绘制 线条 或 未 闭合 图 形 时 可 以 使 用 lineCap 属 性 来 设置 线条 末端 的 样式 。 这 个 属性 
允许 的 三 个 值 是 : butt, roundfllsquare (butt 为 默认 值 )。 代 码 清单 36-2 展 示 了 这 个 属性 和 各 个 
值 的 用 法 。 
代码 清单 36-2 设置 lineCap 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float:left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="200" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext("2d"); 








ni 











TH 














.strokeStyle = "red"; 
ineWidth = "2"; 
.beginPath(); 
-moveTo(0, 50); 
ineTo(200, 50); 
.stroke(); 


NANANA 
xx X X x x 


ctx.strokeStyle - "black"; 
ctx.lineWidth = 40; 

















var xpos = 50; 

var styles - ["butt", "round", "square"]; 

for (var i = 0; i < styles.length; i++) { 
ctx.beginPath(); 
ctx.lineCap - styles[i]; 
ctx.moveTo(xpos, 50); 
ctx.lineTo(xpos, 150); 
ctx.stroke(); 
xpos += 50; 

} 

</script> 
</body> 
</html> 
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这 个 例子 里 的 脚本 为 每 一 种 样式 都 绘制 了 一 条 非常 粗 的 线 。 我 还 添加 了 一 条 参考 线 , 月 
示 round 和 square 样 式 在 绘制 时 会 超过 线条 末端 ， 如 图 36-2 所 示 。 
[ arim) 
®©) Example = 
€ > QC |Qtitan/listings/e ve | A 























图 36-2 ”三 种 lineCap 样 式 


36.1.2 ”绘制 矩形 


rect 方 法 会 给 当前 路 径 添 加 一 条 矩形 的 子路 径 。 如 果 只 需要 一 个 单独 的 矩形, 那么 第 35 章 介 
绍 过 的 fillRect 和 strokeRect 方 法 是 更 合适 的 选择 。 如 果 你 需要 给 一 个 更 复杂 的 图 形 添加 矩形 ， 


rect 方法 就 很 有 用 了 ， 如 代码 清单 36-3 所 示 。 























代码 清单 36-3 ”用 iect 方 法 绘制 矩形 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 


<style> 
canvas {border: thin solid black} 


body > * {float: left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 


<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 


ctx.fillStyle = "yellow"; 
ctx.strokeStyle = "black"; 
ctx.lineWidth = 4; 


ctx.beginPath(); 
ctx.moveTo(110, 10); 


36.1 用 路 径 绘 图 
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ctx.lineTo(110, 100); 
ctx.lineTo(10, 10); 
ctx.closePath(); 


ctx.rect(110, 10, 100, 90); 
ctx.rect(110, 100, 130, 30); 


ctx. fill(); 
ctx.stroke(); 
«/script» 
«/body» 
«/html» 











使 用 rect 方 法 时 不 需要 用 moveTo 方 法 ， 因 为 我 们 在 此 方法 的 前 两 个 参数 里 已 经 指定 了 矩形 的 


坐标 。 代 码 清 单 中 绘制 了 一 对 线条 ， 调 用 closePath 方 法 创建 了 一 个 三 角形 ， 然 后 绘制 了 两 个 邻 


接 的 和 矩形。 从 图 36-3 里 可 以 看 到 结果 。 
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图 36-3 ”用 rect 方 法 绘制 矩形 














子路 径 不 一 定 需 要 相连 才能 组 成 路 径 。 可 以 绘制 几 条 分 离 的 子路 径 , 它们 仍然 会 被 视 为 同一 


个 图 形 的 组 成 部 分 。 代 码 清单 36-4 对 此 进行 了 演示 。 
代码 清单 36-4 ”使 用 分 离 的 子路 径 





<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
ctx.fillStyle = "yellow"; 


ctx.strokeStyle = "black"; 
ctx.lineWidth = 4; 


ctx.beginPath(); 
ctx.moveTo(110, 10); 


ctx.lineTo(110, 100); 
ctx. lineTo(10, 10); 
ctx.closePath(); 
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ctx.rect(120, 10, 100, 90); 
ctx.rect(150, 110, 130, 20); 


ctx. fillQ; 
ctx.stroke(); 
</script> 























在 这 个 例子 里 ， 子 路 径 之 间 并 不 相连 ， 但 总 体 结果 仍然 是 一 条 单独 的 路 径 。 当 我 调用 stroke 
或 fi11 方 法 时 ， 它 们 的 效果 会 应 用 到 所 有 已 创建 的 子路 径 上 ， 如 图 36-4 所 示 。 
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图 36-4 EHAS AER 


36.2 £z [SA 


我 们 使 用 arc 和 arcTco 方 法 在 画布 上 绘制 圆 弧 ， 不 过 这 两 种 方法 绘制 圆 弧 的 方式 有 所 不 同 。 表 
36-3 介 绍 了 canvas 里 与 圆 踊 有 关 的 方法 。 





表 36-3 AMA 
名 称 说 — HB ik 回 



























































arc(x, y, rad, startAngle, 绘制 一 段 圆 弧 到 (x, y)， 半 径 为 r ad， 起 始 角度 为 startAngle， 结 束 角度 为 void 
endAngle, direction) EA a coe F 

endAngle。 可 选 参数 direction 指 定 了 圆 弧 的 方向 。 
arcTo(x1, y1, x2, y2,rad) 绘制 一 段 半径 为 rad， 经 过 (Cel,?1)， 直 到 (xz2, ?2) 的 圆 弧 vere 


36.2.1 使 用 arcTo 方法 
代码 清单 36-5 演 示 了 如 何 使 用 arcTo 方 法 。 
代码 清单 36-5 ”使 用 arcTo 方 法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
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<style> 


canvas {border: thin solid black} 
body > * {float:left; } 


</style> 
</head> 
<body> 


<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 


</canvas> 
<script> 


var ctx = document.getElementById("canvas").getContext ("2d"); 


var pointi 
var point2 
var point3 





= [100, 10]; 
= [200, 10]; 
= [200, 110]; 


ctx.fillStyle - "yellow"; 
ctx.strokeStyle - "black"; 
ctx.lineWidth = 4; 


ctx.beginPath(); 
ctx.moveTo(point1[0], point1[1]); 
ctx.arcTo(po 

ctx.stroke(); 
drawPoint(point1[0], point1[1]); 
drawPoint(point2[0], point2[1]); 
drawPoint(point3[0], point3[1]); 


ctx.beginPath(); 
ctx.moveTo 


ctx.li 
ctx.li 


ctx.s 


neTo 
neTo 
troke 








point1[0], pointi[ 
point2[0], point2[ 
point3[0], point3[ 
) ; 


function drawPoint(x, y) { 


C 


c 
c 
} 
</script> 
</body> 
</html> 





tx.lineWidth = 1; 
tx.strokeStyle = "red"; 
tx.strokeRect(x -2, y-2, 








int2[0], point2[1], point3[0], point3[1], 100); 


4, 4); 

















arcTo 方 法 绘制 的 圆 弧 依靠 两 条 线 完成 。 第 一 条 线 是 从 上 一 条 子路 径 的 终点 绘制 到 前 两 个 方 


法 参数 所 描述 的 点 。 第 二 条 
的 点 。 然 后 canvas 会 绘制 从 上 一 条 子路 径 的 


-一 个 





终点 


TX 





线 是 从 前 两 个 方法 参数 所 描述 的 点 绘制 到 第 三 个 和 第 四 个 参数 所 描述 





到 第 二 个 点 之 间 最 短 的 一 条 圆 跌 ， 其 半径 由 最 后 











一 个 参数 指定 。 为 了 让 它 便于 理解 ,我 给 画布 添加 了 两 条 额外 的 路 径 来 提供 一 些 上 下 文 信息 ， 如 


图 36-5 所 示 。 


可 以 看 到 两 条 红色 的 线 。 我 指定 了 一 个 半径 ， 两 条 线 的 长 度 也 完全 一 致 ， 这 就 意味 着 我 们 得 
到 了 一 条 匀称 的 曲线 , 刚好 触 碰 到 上 一 条 子路 径 的 终点 和 第 三 个 与 第 四 个 参数 所 描述 的 点 。 半 入 
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和 线条 长 度 并 不 总 是 具有 如 此 方便 的 尺寸 ， 所 以 canvas 会 根据 需要 调整 所 绘制 的 圆 弧 。 代 码 清 
单 36-6 对 此 进行 了 演示 ,， 它 使 用 第 30 章 介绍 过 的 事件 监控 鼠标 运动 , 在 屏幕 上 的 鼠标 移动 时 为 不 
同 的 点 绘制 圆 弧 。 
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图 36-5 ”使 用 arcTo 方 法 











代码 清单 36-6 ”响应 和 鼠标 移动 绘制 加 弧 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float: left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var canvasElem = document.getElementById("canvas"); 
var ctx = canvasElem.getContext ("2d"); 


var point1 = [100, 10]; 
var point2 = [200, 10]; 
var point3 = [200, 110]; 


draw(); 


canvasElem.onmousemove - function (e) ( 
if (e.ctrlKey) ( 
pointi = [e.clientX, e.clientY]; 
} else if(e.shiftKey) { 
point2 = [e.clientX, e.clientY]; 
} else { 
point3 = [e.clientX, e.clientY]; 


ctx.clearRect(0, 0, 540, 140); 
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draw(); 


function draw() { 


ctx.fillStyle = "yellow"; 
ctx.strokeStyle = "black"; 
ctx.lineWidth = 4; 


x x X 


.beginPath(); 
moveTo(point1[0], point1[1]); 

arcTo(point2[0], point2[1], point3[0], point3[1], 50); 
stroke(); 





o noo o5 
X X x x 


drawPoint(pointi[O], point1[1]); 
drawPoint(point2[0], point2[1]); 
drawPoint(point3[0], point3[1]); 

















ctx.beginPath(); 
ctx.moveTo(point1[0], pointi[1]); 
ctx.lineTo(point2[0], point2[1]); 
ctx.lineTo(point3[0], point3[1]); 
ctx.stroke(); 


function drawPoint(x, y) { 
ctx.lineWidth - 

ctx.strokeStyle - "red"; 

ctx.strokeRect(x -2, y-2, 4, 4); 





«/script» 
</body> 
</html> 


根据 按键 的 不 同 ， 这 个 例子 里 的 脚本 会 随 着 鼠标 运动 移动 不 同 的 点 。 如 果 按 下 了 Ctrl 键 ， 

个 点 就 会 移动 ( 即 上 一 条 子路 径 的 终点 )。 如 果 按 id 第 二 个 点 就 会 移动 
前 两 个 参数 所 代表 的 点 )。 如 果 这 文 两 个 键 都 没有 按 下 ， 第 三 个 点 就 会 移动 〈 第 三 个 和 第 四 个 方法 
参数 所 代表 的 点 )。 这 个 例子 值得 你 花 一 点 时 间 尝 试 一 下 ， 体 会 加 弧 和 两 条 线 的 位 置 之 间 有 着 怎 
样 的 联系 。 从 图 36-6 可 以 看 到 它 的 截图 。 
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36.2.2 ”使 用 arc 方法 


arC 方 法 使 用 起 来 略微 简单 一 些 。 我 们 用 前 两 个 方法 参数 在 画布 上 指定 一 个 
数 指定 圆 绝 的 半径 , 然后 指定 圆 弧 的 起 始 和 结束 角度 。 最 后 一 个 参数 指定 绘制 圆 
还 是 逆 时 针 方 向 。 代 码 清单 36-7 给 出 了 一 些 例子 。 


代码 清单 36-7 使 用 arc 方 法 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float: left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 
ctx. fillStyle = "yellow"; 
ctx.lineWidth = "3"; 








7 


ctx. beginPath(); 
ctx.arc(70, 70, 60, 0, Math.PI * 2, true); 
ctx.stroke(); 


ctx.beginPath(); 

ctx.arc(200, 70, 60, Math.PI/2, Math.PI, true); 
ctx. fill(); 

ctx.stroke(); 


ctx.beginPath(); 

var val = 0; 

for (var i = 0; i < 4; i++) ( 
ctx.arc(350, 70, 60, val, val + Math.PI/4, false); 
val+= Math.PI/2; 


ctx.closePath(); 
ctx. fill(); 
ctx. stroke(); 
</script> 
</body> 
</html> 


从 图 36-7 可 以 看 到 由 这 些 圆 弧 所 描述 的 图 形 。 
如 第 一 个 和 第 二 个 圆 弧 所 示 ， 我 们 可 以 用 arc 方 法 绘制 完整 的 圆 和 普通 圆 孤 
到 了 。 但 是 ， 如 第 三 个 图 形 所 示 ， 我们 可 以 用 arc 方 法 创建 更 为 复杂 的 路 径 。 如 及 
































A — 
点 o 用 第 三 个 参 


弧 时 是 按 顺 时 针 





， 你 可 能 已 经 想 
使 用 arc 方 法 时 





36.3 ”绘制 贝 塞 尔 曲线 773 





已 经 绘制 了 一 条 子路 径 ， 那 么 就 会 有 一 条 线 直 接 从 上 一 条 子路 径 的 终点 绘制 到 arc 方 法 前 两 个 参 
数 所 描述 的 坐标 上 。 这 条 线 是 额外 添加 到 我 们 描述 的 圆 弧 上 的 。 我 把 这 种 特性 与 for 循 环 结合 使 
用 ， 连 接 四 小 段 围绕 着 同一 个 点 绘制 的 圆 弧 ， 从 而 实现 图 36-7 里 展示 的 图 形 。 
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36.3 绘制 贝 塞 尔 曲线 


canvas 支 持 绘制 两 种 贝 塞 尔 曲线 : 三 次 和 二 次 。 你 多 半 已 经 在 某 种 绘图 套件 里 使 用 过 贝 塞 尔 
曲线 。 我 们 选择 一 个 起 点 和 一 个 终点 ,然后 添加 一 个 或 多 个 控制 点 来 形成 曲线 。canvas 贝 塞 尔 曲 
线 的 问题 在 于 我 们 不 能 得 到 任何 视觉 反馈 , 这 就 更 难以 获得 我 们 想 要 的 曲线 。 在 接 下 来 的 例子 里 ， 
我 会 给 脚本 添加 一 些 代码 来 提供 一 些 上 下 文 信息 , 而 在 实际 的 项 目 中 你 必须 通过 实验 来 获得 需要 
的 曲线 。 表 36-4 展 示 了 可 以 用 来 绘制 曲线 的 方法 。 


表 36-4 ”曲线 方法 









































名 称 说 明 B E 
bezierCurveTo(cx1, cy1, cx2, cy2, x, yY) ”绘制 一 段 贝 塞 尔 曲 线 到 点 (x,y), 控制 点 为 (cx1, cy1) 和 (cx2, cy2)。 void 
quadraticCurveTo(cx, xy, x, y) 绘制 一 段 二 次 贝 塞 尔 曲线 到 点 (co 力 ， 控 制 点 为 (cx, cy) void 





36.3.4 绘制 三 次 贝 塞 尔 曲线 


bezierCurveTo 方 法 会 绘制 一 条 曲线 , 范围 是 从 上 一 条 子路 径 的 终点 到 第 五 个 与 第 六 个 方法 参 
数 所 指定 的 点 。 控 制 点 有 两 个 ， 它 们 由 前 四 个 参数 指定 。 代 码 清单 36-8 展 示 了 如 何 使 用 这 个 方法 
(并 添加 了 一 些 额外 路 径 以 便 你 能 够 更 容易 理解 参数 值 与 生成 的 曲线 之 间 的 关系 )。 


代码 清单 36-8 绘制 三 次 贝 塞 尔 曲线 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
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<style> 
canvas {border: thin solid black} 
body > * {float:left; } 
</style> 
</head> 
<body> 
«canvas id-"canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var canvasElem = document.getElementById("canvas") ; 
var ctx = canvasElem.getContext ("2d"); 


var startPoint = [50, 100]; 
var endPoint = [400, 100]; 
var cpi = [250, 50]; 
var cp2 - [350, 50]; 


canvasElem.onmousemove = function(e) { 
if (e.shiftKey) { 
cpi = [e.clientX, e.clientY]; 
j else if (e.ctrlKey) { 
cp2 = [e.clientX, e.clientY]; 





j 
ctx.clearRect(O, 0, 500, 140); 
draw(); 

j 

draw(); 


function draw() { 

ctx.lineWidth = 3; 

ctx.strokeStyle - "black"; 

ctx.beginPath(); 

ctx.moveTo(startPoint[0], startPoint[1]); 
ctx.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1], 
endPoint[0], endPoint[1]); 

ctx.stroke(); 


ctx. lineWidth = 1; 

ctx.strokeStyle = "red"; 

var points = [startPoint, endPoint, cp1, cp2]; 
for (var i = 0; i < points.length; i++) { 
drawPoint(points[i]); 





drawLine(startPoint, cp1); 
drawLine(endPoint, cp2); 


} 


function drawPoint(point) { 
ctx.beginPath(); 


ctx.strokeRect(point[O] -2, point[1] -2, 4, 4); 
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function drawLine(from，to) { 
ctx.beginPath(); 
ctx.moveTo(from[0], from[1]); 
ctx.lineTo(to[0], to[1]); 
ctx.stroke(); 

} 

</script> 
</body> 
</html> 


为 了 让 你 对 曲线 的 绘制 方式 有 个 大 致 的 概念 , 这 个 例子 里 的 脚本 会 响应 鼠标 运动 而 移动 贝 塞 
尔 曲线 上 的 控制 点 。 如 果 按 下 了 Shif 键 ， 第 一 个 控制 点 就 会 移动 。 如 果 按 下 了 Ctrl 键 ， 第 二 个 控 
制 点 就 会 移动 。 从 图 36-8 可 以 看 到 它 的 效果 。 
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图 36-8 ”绘制 三 次 贝 塞 尔 曲线 





36.3.2 ”绘制 二 次 贝 塞 尔 曲线 


二 次 贝 塞 尔 曲线 只 有 一 个 控制 点 ， 因 此 quadraticCurveTo 方 法 的 参数 比 bezierCurveTo 方 法 要 
少 两 个 。 代 码 清单 36-9 展 示 了 前 一 个 例子 重 制 后 的 版 本 ， 里 面 用 quadraticCurveTo 方 法 绘制 了 二 
次 贝 塞 尔 曲线 。 


代码 清单 36-9 ”绘制 二 次 贝 塞 尔 曲线 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float:left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 








776 第 36 章 使 用 canvas 元 素 (AIRA) 





</canvas> 

<script> 
var canvasElem = document.getElementById("canvas"); 
var ctx = canvasElem.getContext ("2d"); 


var startPoint = [50, 100]; 
var endPoint = [400, 100]; 
var cpi = [250, 50]; 


canvasElem.onmousemove = function(e) { 
if (e.shiftKey) { 
cpi = [e.clientX, e.clientY]; 


ctx.clearRect(O, 0, 500, 140); 
draw(); 


function draw() { 

ctx.lineWidth = 3; 

ctx.strokeStyle - "black"; 

ctx.beginPath(); 

ctx.moveTo(startPoint[0], startPoint[1]); 
ctx.quadraticCurveTo(cp1[0], cp1[1], endPoint[0], endPoint[1]); 
ctx.stroke(); 


ctx.lineWidth = 1; 
ctx.strokeStyle - "red"; 
var points = [startPoint, endPoint, cp1]; 
for (var i = 0; i < points.length; i++) { 
drawPoint(points[i]); 





drawLine(startPoint, cp1); 
drawLine(endPoint, cp1); 





} 


function drawPoint(point) { 
ctx.beginPath(); 


ctx.strokeRect(point[O] -2, point[1] -2, 4, 4); 


function drawLine(from, to) { 
ctx.beginPath(); 
ctx.moveTo(from[0], from[1]); 
ctx.lineTo(to[0], to[1]); 
ctx.stroke(); 





} 


</script> 
</body> 
</html> 


从 图 36-9 可 以 看 到 一 条 示例 曲线 。 








36.4 创建 剪辑 区 域 TTE 














f o/s =a) 
Q Example \ bs . d f 
€ > Q © titan/listings/example.htm wa 
axe 
NM a 











图 36-9 ”一 条 二 次 贝 塞 尔 曲线 





36.4 创建 剪辑 区 域 


本 章 前 面 介绍 过 ， 可 以 用 stroke 和 fil1 方 法 来 绘制 或 填充 一 条 路 径 。 还 有 另 一 种 方式 可 以 做 
到 这 一 点 ， 那 就 是 使 用 表 36-5 介 绍 的 方法 。 


表 36-5 ”裁剪 方法 
































名 称 说 明 ik 回 
clip() 创建 新 的 裁剪 区 域 void 





一 旦 定义 了 一 块 裁剪 区 域 ， 就 只 有 区 域内 的 路 径 才 会 显示 到 屏幕 上 了 。 代 码 清单 36-10 对 此 
进行 了 演示 。 
代码 清单 36-10 “使 用 裁剪 区 域 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float:left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 











ctx.fillStyle = "yellow"; 
ctx.beginPath(); 
ctx.rect(0, 0, 500, 140); 
ctx.fill(); 


ctx.beginPath(); 
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ctx.rect(100, 20, 300, 100); 
ctx.clip(); 


ctx. fillStyle = "red"; 
ctx.beginPath(); 
ctx.rect(0, 0, 500, 140); 
ctx.fill(); 


</script> 
</body> 
</html> 


这 个 例子 里 的 脚本 绘制 了 一 个 填 满 画布 的 矩形 , 然后 创建 了 一 个 较 小 的 裁剪 区 域 并 绘制 了 另 
一 个 填 满 画布 的 矩形 。 从 图 36-10 可 以 看 到 ， 第 二 个 矩形 只 绘制 了 裁剪 区 域 之 内 的 部 分 。 
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图 36-10 ”裁剪 区 域 的 效果 


36.5 ”绘制 文本 


可 以 在 画布 上 绘制 文本 ， 不 过 对 这 种 功能 的 支持 还 很 初步 。 表 36-6 展 示 了 可 用 的 方法 。 
#36-6 ”文本 方法 




















£ mW 说 明 i; m 
FillText(<text>, x, y, width) EEG, y) EAR BDEBUEHEGESOR. RESET, CRT void 
文本 宽度 的 上 限 
strokeText(<text>, x, y, width) 在 位 置 (, 力 上 绘制 并 措 边 指定 文本 。 宽 度 参数 是 可 选 的 ， 它 设置 了 void 
文本 宽度 的 上 限 
我 们 可 以 使 用 三 种 绘制 状态 属性 来 控制 文本 绘制 的 方式 ， 如 表 36-7 所 示 。 





表 36-7 文本 绘制 状态 属性 
名 M Ho PA 























返 回 
font 设置 绘制 文本 时 使 用 的 字体 FRR 
textAlign 设置 文本 的 对 齐 方式 : start, end, left, right, center 字符 串 
textBaseline 设置 文本 的 基线 : top. hanging, middle, alphabetic, ideographic, bottom 字符 串 
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代码 清单 36-11 展 示 了 如 何 填充 和 描 边 文本 。 我 们 可 以 用 与 CSS 字 体 简写 属 
串 〈 在 第 22 章 介绍 过 ) 来 指定 font 属 性 的 值 。 


代码 清单 36-11 在 画布 上 绘制 文本 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float: left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="350" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 


Le 








生 相 同 的 格式 字符 





ni 





ctx.fillStyle - "lightgrey"; 
ctx.strokeStyle - "black"; 
ctx.lineWidth = 3; 


ctx.font = "100px sans-serif"; 
ctx.fillText("Hello", 50, 100); 
ctx.strokeText("Hello", 50, 100); 
«/script» 
«/body» 
«/html» 


文本 会 使 用 fillstyle 和 strokeStyle 属 性 进行 绘制 ， 这 就 意味 着 我 们 拥有 与 图 形 相 同 的 一 组 
颜色 、 渐 变 和 图 案 。 在 这 个 例子 里 ， 我 用 两 种 纯色 填充 和 描 边 了 文本 。 从 图 36-11 可 以 看 到 它 的 
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图 36-11 ”填充 和 描 边 文本 
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36.6 ”使 用 特效 和 变换 


我 们 可 以 为 画布 应 用 许多 特效 和 变换 ， 接 下 来 的 几 节 会 对 它们 进行 介绍 。 


36.6.1 使 用 阴影 


























可 以 用 四 种 绘制 状态 属性 来 给 我 们 在 画布 上 绘制 的 图 形 和 文本 添加 阴影 。 这 些 属 性 如 表 36-8 
所 示 。 
表 36-8 ”阴影 属性 
名 o PW 说 — HH 返 回 
shadowBlur 设置 阴影 的 模糊 程度 数值 
shadowColor 设置 阴影 的 颜色 字符 串 
shadowOffsetX 设置 阴影 的 水 平 偏 移 量 数值 
shadowOffsetY 设置 阴影 的 垂直 偏 移 量 数值 























代码 清单 36-12 展 示 了 如 何 用 这 些 属性 来 添加 阴影 。 
代码 清单 36-12 ”给 图 形 和 文本 应 用 阴影 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float: left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="140"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 


ctx. fillStyle = "lightgrey"; 
ctx.strokeStyle = "black"; 
ctx.lineWidth = 3; 


ctx.shadowOffsetX = 5; 
ctx.shadowOffsetY - 5; 
ctx.shadowBlur - 5; 
ctx.shadowColor - "grey"; 


ctx.strokeRect(250, 20, 100, 100); 
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a 
x 


tx.beginPath() ; 
tx.arc(420, 70, 50, 0, Math.PI, true); 
tx.stroke(); 


n NA 
x x 


ctx.beginPath(); 
ctx.arc(420, 80, 40, O, Math.PI, false); 
ctx.fill(); 


ctx.font = "100px sans-serif"; 
ctx.fillText("Hello", 10, 100); 
ctx.strokeText("Hello", 10, 100); 
</script> 
</body> 
</html> 


这 个 例子 给 文本 、 一 个 矩形 、 一 个 完整 的 圆 和 两 段 圆 弧 应 用 了 阴影 。 如 图 36-12 所 示 ， 无 论 
图 形 是 开放 、 闭 合 、 填 充 还 是 描 边 的 ， 都 能 应 用 阴影 。 
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36.6.2 ”使 用 透明 度 


可 以 用 两 种 方式 来 给 我 们 绘制 的 文本 和 图 形 设置 透明 度 。 第 一 种 是 用 第 4 章 介绍 的 rgba 函 数 
( 而 不 是 rgb ) 指定 一 个 fillstyle 或 strokestyle 值 。 还 可 以 使 用 绘制 状态 属性 globalAlpha， 它 应 
用 的 透明 度 是 全 局 性 的 。 代 码 清单 36-13 展 示 了 globalAlpha 属 性 的 用 法 。 


代码 清单 36-13 ”使 用 globalAlpha 属 性 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas {border: thin solid black} 
body > * {float:left; } 
</style> 
</head> 
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<body> 
<canvas id="canvas" width="300" height="120"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 


ctx.fillStyle = "lightgrey"; 
ctx.strokeStyle - "black"; 
ctx.lineWidth = 3; 


ctx.font = "100px sans-serif"; 
ctx.fillText("Hello", 10, 100); 
ctx.strokeText("Hello", 10, 100); 


ctx. fillstyle = "red"; 
ctx.globalAlpha = 0.5; 
ctx.fillRect(100, 10, 150, 100); 
</script> 
</body> 
</html> 


globalAlpha 属 性 的 值 可 以 从 0 ( 完全 透明 ) 到 1 ( 完全 不 透明 ,这 是 默认 值 )。 在 这 个 例子 里 ， 
我 绘制 了 一 些 文本 ， 将 globalAlpha 属 性 设 为 0.5， 然 后 在 文字 上 部 分 填充 了 一 个 和 矩形。 从 图 36-13 
可 以 看 到 它 的 结果 。 
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[436-13 ”通过 globalAlpha 属 性 使 用 透明 度 





36.6.3 ”使 用 合成 


可 以 将 透明 度 与 globalCompositeOperation 属 性 结合 使 用 ， 来 控制 图 形 和 文本 在 画布 上 绘制 
的 方式 。 表 36-9 介 绍 了 这 个 属性 允许 的 值 。 对 这 个 属性 来 说 ，source 包 括 了 在 该 属性 设置 后 执行 
的 所 有 操作 ， 而 目标 图 像 是 属性 设置 时 的 画布 状态 。 
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表 36-9 globalCompositeOperation 人 允许 的 值 








值 Wi — 明 
copy 将 来 源 绘制 于 目标 之 上 ， 和 忽略 一 切 透明 度 设置 














destination-atop 与 source-atop 相 同 ， 但 用 目标 图 像 替 代 来 源 图 像 ， 反 之 亦 然 
destination-in 与 source-in 相 同 , (AFA EUERIEHEUER RAR, aK 
destination-over 与 Source-overz 相 同 ， 但 用 目标 图 像 替 代 来 源 图 像 ， 反 之 亦 然 
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distination-out 与 source-out 相 同 ， 但 用 目标 图 像 奉 代 来 源 图 像 ， 反 之 亦 然 

lighter 显示 来 源 图 像 与 目标 图 像 的 总 和 ， 颜 色 值 限制 最 高 255 ( 100% ) 

ee o 在 两 个 图 像 都 不 透明 处 显示 米 源 图 像 。 目 标 图 像 不 透明 但 来 源 图 像 透明 处 显示 目标 图 像 。 其 
他 位 置 显示 为 透明 

source-in 来 源 图 像 和 目标 图 像 都 不 透明 处 显示 来 源 图 像 。 其 他 位 置 显 示 为 透明 

source-out 来 源 图 像 不 透明 但 目标 图 像 透明 处 显示 来 源 图 像 。 其 他 位 置 显 示 为 透明 

source-over 来 源 图 像 不 透明 处 显示 来 源 图 像 。 其 他 位 置 显示 目标 图 像 

xor 对 来 源 图 像 和 目标 图 像 执 行 异 或 运算 




















globalCompositeOperation 属 性 的 值 可 以 创造 出 一 些 引 人 注 目的 效果 。 代 码 清 单 36-14 包 含 一 
个 select 元 素 ， 它 里 面 的 选项 赛 括 了 所 有 的 合成 属性 值 。 这 个 例子 值得 你 花 一 点 时 间 尝 试 一 下 ， 
看 看 每 一 种 合成 模式 的 工作 方式 。 
代码 清单 36-14 ”使 用 globalCompositeOperation 属 性 


<!DOCTYPE HTML> 














<html> 
<head> 
<title>Example</title> 
<style> 
canvas (border: thin solid black; margin: 4px; } 
body > * {float:left; } 
</style> 
</head> 
<body> 


<canvas id="canvas" width="300" height="120"> 
Your browser doesn't support the <code>canvas</code> element 

</canvas> 

<label>Composition Value:</label><select id-"list"» 
<option>copy</option> 
<option>destination-atop</option><option>destination-in</option> 
<option>destination-over</option><option>distination-out</option> 
«option»lighter«/option»«option»source-atop«/option» 
«option»source-in«/option»«option»source-out«/option» 
«option»source-over«/option»«option»xor«/option» 

«/select» 

«script» 
var ctx = document.getElementById("canvas").getContext("2d"); 














ctx.fillStyle - "lightgrey"; 
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ctx.strokeStyle = "black"; 
ctx. lineWidth = 3; 


var compVal = "copy"; 


document.getElementById("list").onchange = function(e) { 
compVal = e.target.value; 
draw(); 

} 


draw(); 


function draw() { 
ctx.clearRect(0, 0, 300, 120); 
ctx.globalAlpha = 1.0; 
ctx.font = "100px sans-serif"; 
ctx.fillText("Hello", 10, 100); 
ctx.strokeText("Hello", 10, 100); 


ctx.globalCompositeOperation = compVal; 


ctx.fillStyle - "red"; 
ctx.globalAlpha - 0.5; 
ctx.fillRect(100, 10, 150, 100); 


} 
</script> 
</body> 
</html> 


可 以 从 图 36-14 看 到 source-out 和 destination-over 值 。 有 些 浏览 器 解释 这 些 样 式 的 方式 稍 有 
不 同 ， 因 此 你 看 到 的 可 能 与 图 中 展示 的 不 完全 一 致 。 
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图 36-14 ”使 用 globalCompositeOperation 属 性 


36.6.4 ”使 用 变换 
我 们 可 以 给 画布 应 用 变换 ， 它 会 应 用 到 后 续 所 有 的 绘图 操作 上 。 表 36-10 介 绍 了 变换 方法 。 
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表 36-10 ”变换 属性 





















































名 称 说 明 ig E 
scale(«xScale», «yScale») 沿 X 轴 缩放 画布 xscale 倍 ， 沿 Y 轴 yscale 倍 void 
rotate(<angle>) 使 画布 围绕 点 (0, 0) 顺 时 针 旋 转 指 定 的 弧度 数 void 
translate(<x>, <y>) 重 映射 画布 坐标 为 沿 X 轴 x， 沿 Y 轴 y void 
transform(a, b, c, d, e, f) 合并 现 有 的 变换 和 a-f 值 所 指定 的 矩阵 void 
setTransform(a, b, c, d, e, f) jja-f 值 所 指定 的 和 矩阵 奉 换 现 有 的 变换 void 

这 些 方法 创建 的 变换 只 会 应 用 到 后 续 的 绘图 操作 上 ( 画布 上 现 有 的 内 容 保持 不 变 )。 代 码 清 
单 36-15 展 示 了 如 何 使 用 缩放 、 旋 转 和 坐标 重 映射 方法 。 


代码 清单 36-15 ”使 用 变换 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
canvas (border: thin solid black; margin: 4px; } 
body > * {float:left; } 
</style> 
</head> 
<body> 
<canvas id="canvas" width="400" height="200"> 
Your browser doesn't support the <code>canvas</code> element 
</canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext ("2d"); 


ctx. fillStyle = "lightgrey"; 
ctx.strokeStyle = "black"; 
ctx. lineWidth = 3; 


.clearRect(0, 0, 300, 120); 
.globalAlpha = 1.0; 

.font = "100px sans-serif"; 
.fillText("Hello", 10, 100); 
trokeText("Hello", 10, 100); 
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ctx.scale(1.3, 1.3); 
ctx.translate(100, -50); 
ctx.rotate(0.5); 


ctx.fillStyle = "red"; 
ctx.globalAlpha = 0.5; 
ctx. fillRect(100, 10, 150, 100); 


ctx.strokeRect(0, 0, 300, 200); 
</script> 
</body> 
</html> 
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在 这 个 例子 里 , 我 填充 并 描 边 了 一 些 文本 ,然后 缩放 、 坐 标 重 映射 和 旋转 了 画布 ,这 些 操作 
影响 了 我 接 下 来 绘制 的 实心 矩形 和 空心 矩形 。 从 图 36-15 可 以 看 到 它 的 效果 。 


| 
36.7 小 结 


本 童 展示 了 如 何 用 不 同 种 类 的 路 径 在 画布 上 绘图 ,包括 线条 、 和 矩形 、 圆 弧 和 曲线 。 此 外 ， 
演示 了 canvas 的 文本 工具 ， 以 及 如 何 应 用 阴影 和 透明 度 等 特效 。 eee 
成 模式 和 变换 方法 。 
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图 36-15 ”变换 画布 








使 用 拖 放 








HTML5 添 加 了 对 拖 放 (drag and drop) 的 支持 。 我 们 之 前 只 能 依靠 jQuery 这 样 的 JavaScript 
库 才 能 处 理 这 种 操作 。 把 拖 放 内 置 到 浏览 器 的 好 处 是 它 可 以 正确 地 集成 到 操作 系统 中 , 而 且 正 如 
你 将 看 到 的 ， 它 能 够 跨 浏览 需 工 作 。 
这 项 功能 仍 处 于 起 步 阶段 ， 规 范 与 主流 浏览 器 所 提供 的 实现 方式 之 间 还 存在 着 巨大 的 鸿沟 。 
不 是 所 有 浏览 器 都 能 实现 规范 的 全 部 内 容 , 而 且 某 些 功能 的 实现 方式 还 存在 着 实质 上 的 区 别 。 在 
这 一 章 里 ， 我 会 向 你 展示 当前 哪些 功能 能 够 正常 工作 。 它 不 是 HTML5 标 准 定义 的 完整 功能 集 ， 
但 是 足以 投入 使 用 。 表 37-1 提 供 了 本 章 内 容 概 要 。 
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37-1 本章 内 容 概要 














































































































i] — 8 解决 方案 代码 清单 

启用 HTML 元 素 的 拖 动 功 能 把 draggable 属 性 设 为 true 37-1 
管理 拖 动 的 生命 周期 处 理 dragstart、drag 和 dragend 事 件 37-2 
创建 一 个 释放 区 处 理 dragenter 和 dragover 事 件 37-3 
在 释放 区 接收 一 个 释放 元 素 处 理 drop 事 件 37-4 
转移 释放 元 素 的 数据 到 释放 区 使 用 DataTransfer 对 象 37-5 
根据 项 目 携带 的 内 容 进行 过 滤 使 用 DataTransfer 对 象 的 getData 方 法 37-6 
处 理 从 操作 系统 拖 动 并 释放 到 释放 区 的 文件 使 用 DataTransfer 对 象 的 files 方 法 37-7 
作为 Ajax 表单 提交 的 一 部 分 上 传 从 操作 系统 拖 使 用 FormData 对 象 的 append 方 法 ,并 传递 File 对 象 作为 ae 
动 并 释放 到 释放 区 的 文件 第 二 个 参数 











37.1 创建 来 源 项 目 


我 们 通过 draggable 属 性 告诉 浏览 带 文 档 里 的 哪些 元 素 可 以 被 拖 动 。 这 个 属性 有 三 个 允许 的 
值 ， 表 37-2 介 绍 了 它们 。 





使 用 拖 放 





表 37-2 ”draggable 属 性 的 值 

















说 OAR 
true 此 元 素 能 被 拖 动 
false 此 元 素 不 能 被 拖 动 
auto 浏览 器 可 以 自主 决定 某 个 元 素 是 否 能 被 拖 动 





























它 的 默认 值 是 auto， 即 把 决定 权 交 给 浏览 器 





， 通 常 来 说 这 就 意味 着 所 有 元 素 默 认 都 是 可 拖 动 
的 ， 我 们 必须 显 式 设置 draggable 属 pee 拖 动 。 使 用 拖 放 功 能 时 ， 我 倾向 于 显 式 设置 
draggable 属 性 为 true, 即使 主流 浏览 器 默认 把 所 有 元 素 都 视 为 draggable 也 是 如 此 。 代码 清 单 37-1 
展示 了 一 张 简单 的 HTML 文 档 ， 里 面 的 一 些 元 素 可 以 被 拖 动 。 


代码 清单 37-1 定义 可 拖 动 项 目 


<!DOCTYPE HTML> 






































<html> 
<head> 
<title>Example</title> 
<style> 
#src > * {float:left;} 
#target, #src > img (border: thin solid black; padding: 2px; margin: 4px; } 
#target (height: 81px; width: 81px; text-align: center; display: table; } 
#target > p (display: table-cell; vertical-align: middle; } 
#target > img (margin: 1px; } 
</style> 
</head> 
<body> 
<div id="src"> 
<img draggable-"true" id-"banana" src-"banana100.png" alt="banana"/> 
<img draggable-"true" id-"apple" src="apple100.png" alt-"apple"/» 
<img draggable-"true" id-"cherries" src-"cherries100.png" alt-"cherry"/» 
«div id-"target"» 
<p>Drop Here</p> 
</div 
</div> 
<script> 
var src = document.getElementById("src"); 
var target = document.getElementById("target"); 
</script> 
</body> 
</html> 





这 个 例子 里 有 三 个 img 元 素 ， 每 一 个 的 draggable 


target 的 div 元 素 ， 稍 后 将 设置 它 用 来 接收 我 们 拖 动 的 img 元 素 。 从 





Ves ADEE 





属性 都 被 设 为 true。 我 还 创建 了 








一 个 id 为 
图 37-1 可 以 看 到 这 个 文档 在 浏 
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图 37-1 三 张 可 拖 动 图 像 和 一 个 目标 


我 们 不 需要 再 做 任何 设置 就 能 拖 动 水 果 图 像 , 但 浏览 器 会 提示 我 们 不 能 把 它们 释放 到 任何 地 
方 。 通 常 的 做 法 是 展示 一 个 禁止 进入 的 标志 作为 光标 ， 如 图 37-2 所 示 。 
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处 理 拖 动 事件 


我 们 通过 一 系列 事件 来 利用 拖 放 功能 。 这 些 事 件 有 的 针对 被 拖 动 的 元 素 , 有 的 针对 可 能 的 释 
放 区 。 表 37-3 介 绍 了 用 于 被 拖 动 元 素 的 事件 。 








表 37-3 ”被 拖 动 元 素 的 事件 














名 PW 说 明 
dragstart 在 元 素 开 始 被 拖 动 时 触发 
drag 在 元 素 被 拖 动 时 反复 触发 
dragend 在 拖 动 操作 完成 时 触发 
我 们 可 以 用 这 些 事件 在 视觉 上 强调 拖 动 操作 ， 如 代码 清单 37-2 所 示 。 





代码 清单 37-2 使 用 针对 被 拖 动 元 素 的 事件 


<!DOCTYPE HTML> 
<html> 
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<head> 


<title>Example</title> 


<style> 

#src > * {floa 
target, #src 
#target {heigh 
#target > p {d 
# 
i 


+ 


target > img 


</style> 
</head> 
<body> 
<div id="src"> 





t:left;} 

> img (border: thin solid black; padding: 2px; margin:4px;] 
t: 81px; width: 81px; text-align: center; display: table;} 
isplay: table-cell; vertical-align: middle;] 

(margin: 1px;} 


mg.dragged (background-color: lightgrey; } 


<img draggable-"true" id-"banana" src-"banana100.png" alt-"banana"/» 
«img draggable-"true" id-"apple" src-"apple100.png" alt-"apple"/» 
<img draggable-"true" id-"cherries" src-"cherries100.png" alt-"cherry"/» 


«div id-"target"» 
«p id-"msg"»Drop Here«/p» 


«/div» 
«/div» 


«script» 
var src - docu 
var target - d 
var msg - docu 


ment.getElementById("src"); 
ocument .getElementById("target"); 
ment.getElementById("msg"); 


src.ondragstart - function(e) ( 
e.target.classList.add("dragged") ; 


src.ondragend 


= function(e) { 


e.target.classList.remove("dragged") ; 
msg.innerHTML = "Drop Here"; 


src.ondrag = function(e) { 
msg.innerHTML = e.target.id; 


</script> 
</body> 
</html> 





我 定义 了 一 个 新 的 CSS 档 








式 ， 它 会 被 应 用 到 属于 dragged 类 的 元 素 上 。 我 在 dragstart 事 件 触 


发 时 把 被 拖 动 的 元 素 添 加 到 这 个 类 中 ， 在 dragend 事 件 触发 时 把 它 从 类 中 移 除 。 作 为 对 drag 事 件 
的 响应 ,我 把 释放 区 里 显示 的 文本 设 成 被 拖 动 元 素 的 id 值 。 在 拖 动 操作 过 程 中 ，drag 事 件 每 隔 儿 
毫秒 就 会 触发 一 次 ， 所 以 这 不 是 最 有 效率 的 技巧 ,但 它 确实 能 演示 这 个 事件 。 从 图 37-3 可 以 看 到 
它 的 效果 。 请 注意 我 们 仍然 没有 可 使 用 的 释放 区 ， 但 它 离 我 们 已 经 不 远 了 。 
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图 37-3 ”使 用 dragstart 、dragend 和 drag 事 件 


37.2 创建 释放 区 


要 让 某 个 元 素 成 为 释放 区 , 我 们 需要 处 理 dragenter 和 dragover 事 件 。 它们 是 针对 释放 区 的 其 
中 两 个 事件 。 表 37-4 介 绍 了 完整 的 释放 区 事件 集合 


37-4 ”释放 区 事件 



































名 HW 说 明 

dragenter 当 被 拖 动 元 素 进 入 释放 区 所 占据 的 屏幕 空间 时 触发 
dragover 当 被 拖 动 元 素 在 释放 区 内 移动 时 触发 

dragleave 当 被 拖 动 元 素 没 有 放下 就 离开 释放 区 时 触发 

drop 当 被 拖 动 元 素 在 释放 区 里 放下 时 触发 























dragenter 和 dragover 事 件 的 默认 行为 是 拒绝 接受 任何 被 拖 放 的 项 目 , 因此 我 们 必须 要 做 的 最 
重要 的 事 就 是 防止 这 种 默认 行为 被 执行 。 代 码 清 单 37-3 包 含 了 一 个 示例 。 





注意 ” 拖 放 功能 的 规范 告诉 我 们 还 必须 给 想 要 成 为 释放 区 的 元 素 应 用 dropzone 属 性 ， 而且 此 属 
性 的 值 应 当 包 含 我 们 愿意 接受 的 操作 与 数据 类 型 细节 。 浏 览 器 实际 上 不 是 这 么 实现 拖 放 
功能 的 。 在 这 一 章 ， 我 介绍 的 是 真正 有 效 的 做 法 ， 而 不 是 规范 所 指定 的 做 法 。 


代码 清单 37-3 ”通过 处 理 dragenter 和 dragover 事 件 创建 释放 区 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
#src > * {float:left;} 
#target, #src > img (border: thin solid black; padding: 2px; margin: 4px; } 
target {height: 81px; width: 81px; text-align: center; display: table;} 
Htarget > p (display: table-cell; vertical-align: middle; } 
Htarget > img (margin: 1px;] 
img.dragged (background-color: lightgrey;] 
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</style> 
</head> 
<body> 
«div id="src"> 
<img draggable-"true" id-"banana" src="banana100.png" alt="banana"/> 
<img draggable-"true" id-"apple" src="apple100.png" alt="apple"/> 
<img draggable-"true" id-"cherries" src-"cherries100.png" alt="cherry"/> 
«div id="target"> 
«p id-"msg"»Drop Here«/p» 
</div> 
</div> 


<script> 
var src = document.getElementById("src"); 
var target = document.getElementById("target"); 
var msg = document.getElementById("msg"); 


target.ondragenter = handleDrag; 
target.ondragover = handleDrag; 


function handleDrag(e) { 
e.preventDefault(); 
) 


src.ondragstart = function(e) { 
e.target.classList.add("dragged") ; 
} 


src.ondragend = function(e) { 
e.target.classList.remove("dragged") ; 
msg.innerHTML = "Drop Here"; 


} 


src.ondrag = function(e) { 
msg.innerHTML = e.target.id; 
} 


</script> 
</body> 
</html> 


添加 这 些 代 码 后 ， 我 们 就 有 了 一 个 活动 的 释放 区 。 当 我 们 拖 动 一 个 项 目 到 释放 区 元 素 上 时 ， 
浏览 器 会 提示 如 果 我 们 放下 它 就 会 被 接受 ， 如 图 37-4 所 示 。 
© Example < We B 
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137-4 ”浏览 器 提示 一 个 项 














LII] 


可 以 被 释放 
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接收 释放 


我 们 通过 处 理 drop 事 件 来 接收 释放 的 元 素 ， 它 会 在 某 个 项 目 被 放 到 释放 区 元 素 上 时 触发 。 代 








码 清单 37-4 展 示 
之 间 的 桥梁 。 


代码 清单 37-4 


<!DOCTYPE HT 
<html> 
<head> 
<tit 
<sty 


</st 
</head> 
<body> 

<div 


</di 


<scr 

















了 如 何 响 应 drop 事 件 ， 具体 的 做 法 是 使 用 一 个 全 局 变量 作为 被 拖 动 元 素 和 释放 区 
处 理 drop 事 件 

ML> 

le>Example</title> 

le> 


#src > * (float:left;) 

#src > img (border: thin solid black; padding: 2px; margin: 4px; } 

target (border: thin solid black; margin: 4px; } 

target { height: 81px; width: 81px; text-align: center; display: table; } 
#target > p (display: table-cell; vertical-align: middle; } 

img.dragged {background-color: lightgrey; } 

yle> 


+ H 


id="src"> 
<img draggable="true" id="banana" src="banana100.png" alt="banana"/> 
<img draggable="true" id="apple" src="apple100.png" alt="apple"/> 
<img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/> 
<div id="target"> 
<p id="msg">Drop Here</p> 
</div> 
v> 





ipt> 

var src = document.getElementById("src"); 

var target = document.getElementById("target"); 
var msg = document.getElementById("msg"); 


var draggedID; 


target.ondragenter = handleDrag; 
target.ondragover = handleDrag; 


function handleDrag(e) { 
e.preventDefault(); 


} 


target.ondrop = function(e) { 
var newElem = document.getElementById(draggedID).cloneNode(false); 
target.innerHTML = ""; 
target .appendChild(newElem) ; 


e.preventDefault(); 





794 第 37 章 使 用 拖 放 





src.ondragstart = function(e) { 
draggedID = e.target.id; 
e.target.classList.add("dragged") ; 


} 


src.ondragend = function(e) { 
var elems = document.querySelectorAll(".dragged"); 
for (var i = 0; i < elems.length; i++) { 
elems[i].classList.remove("dragged"); 
} 
} 
</script> 
</body> 
</html> 


我 在 dragstart 事 件 触发 时 设置 了 变量 draggedID 的 值 。 这 让 我 能 够 记录 被 拖 动 元 素 的 id 属性 
值 。 当 drop 事 件 触发 时 ， 我 用 这 个 值 克 隆 了 被 拖 动 的 img 元 素 ， 把 它 添加 为 释放 区 元 素 的 一 
元 素 。 





提示 “在 这 个 例子 里 ， 我 阻止 了 drop 事 件 的 默认 行为 。 如 果 不 这 么 做 ， 浏 览 器 就 可 能 会 做 出 一 
些 出 人 意料 的 事 。 举 个 例子 ， 在 这 种 情况 下 ，Firefox 浏 览 器 会 关闭 网 页 ， 转 而 显示 被 拖 
动 jmg 元 素 STC 属 性 所 引用 的 图 像 。 





从 图 37-5 可 以 看 到 它 的 效果 。 






gs/example.htm 


图 37-5 ”响应 drag 事 件 

















37.3 ”使 用 DataTransfer WR 
与 拖 放 操 作 所 触发 的 事件 同时 派发 的 对 象 是 DragEvent, 它 派 生 于 MouseEvent。DragEvent 对 象 定 
义 了 Event 与 MouseEvent 对 象 (在 第 30 章 介绍 过 ) 的 所 有 功能 ， 并 额外 增加 了 表 37-5 展 示 的 属性 。 


表 37-5 ”DragEvent 对 象 定义 的 属性 
名 d di — HB 返 回 
dataTransfer 返回 用 于 传输 数据 到 释放 区 的 对 象 DataTransfer 









































37.3 ”使 用 DataTransfer 对 象 795 





我 们 可 以 用 DataTransfer 对 象 从 被 拖 动 元 素 传 输 任意 数据 到 释放 区 元 素 上 。DataTransfer 对 
象 定义 的 属性 和 方法 如 表 37-6 所 示 。 


3k37-6 ”DataTransfer 对 象 定义 的 属性 























名 称 说 明 iR [s] 
types 返回 数据 的 格式 字符 串 数组 
getData(«format») 返回 指定 格式 的 数据 字符 串 
setData(<format>, <data>) 设置 指定 格式 的 数据 void 
clearData(<format>) 移 除 指定 格式 的 数据 void 
files 返回 已 被 拖 动 文件 的 列表 FileList 


























在 上 一 个 例子 里 ,我 克隆 了 元 素 本 身 。 但 DataTransfer 对 象 允许 我 们 使 用 一 种 更 为 复杂 的 方 
式 。 我 们 能 做 的 第 一 件 事 是 用 DataTransfer 对 象 从 被 拖 动 元 素 传输 数据 到 释放 区 ,如 代码 清单 37-5 
所 示 。 


代码 清单 37-5 ”使 用 DataTransfer 对 象 传输 数据 


<!DOCTYPE HTML> 











<html> 
<head> 
<title>Example</title> 
<style> 
#src > * {float:left; } 
#src > img (border: thin solid black; padding: 2px; margin:4px;] 
#target (border: thin solid black; margin:4px;] 
#target ( height: 81px; width: 81px; text-align: center; display: table;] 
#target > p (display: table-cell; vertical-align: middle;] 
img.dragged (background-color: lightgrey;] 
</style> 
</head> 
<body> 
<div id="src"> 
<img draggable-"true" id="banana" src-"banana100.png" alt="banana"/> 
«img draggable-"true" id-"apple" src="apple100.png" alt-"apple"/» 
<img draggable-"true" id-"cherries" src="cherries100.png" alt-"cherry"/» 


«div id="target"> 
«p id-"msg"»Drop Here</p> 
«/div» 
«/div» 


«script» 
var src - document.getElementById("src"); 


var target = document.getElementById("target"); 


target.ondragenter - handleDrag; 
target.ondragover - handleDrag; 


function handleDrag(e) { 
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e.preventDefault(); 
j 


target.ondrop = function(e) { 


var droppedID - e.dataTransfer.getData("Text"); 
var newElem = document.getElementById(droppedID).cloneNode(false); 


target.innerHTML - ""; 
target.appendChild(newElem); 
e.preventDefault(); 


} 

src.ondragstart = function(e) { 
e.dataTransfer.setData("Text", e.target.id); 
e.target.classList.add("dragged") ; 

} 


src.ondragend 
var elems 


function(e) { 


document . querySelectorAll(".dragged"); 


for (var i = 0; i « elems.length; i++) { 
elems[i].classList.remove("dragged") ; 


} 
} 
</script> 
</body> 
</html> 





我 在 响应 dragstart 事 件 时 用 setData 方 法 设置 了 我 想 要 传输 的 数据 。 第 一 个 参数 指定 了 数据 
的 类 型 ， 它 只 支持 两 个 值 : Text 或 Url ( 只 有 Text 获 得 了 浏览 器 的 可 靠 支持 )。 第 二 个 参数 是 我 们 









































想 要 传输 的 数据 : 在 这 个 案例 里 是 被 拖 动 元 素 的 id 
法 ， 并 把 数据 类 型 作为 参数 。 














BE 





E。 为 了 获取 它 的 值 ， 我 使 用 了 getData 方 





你 可 能 会 觉得 奇怪 : 为 什么 这 种 方式 比 使 用 全 局 变量 更 好 ? 答案 是 它 能 跨 浏 览 器 工作 。 我 这 











么 说 的 意思 不 是 指 跨 同 一 个 浏览 需 里 的 窗口 或 标签 页 





， 而 是 横 跨 不 同类 型 的 浏览 名。 这 意味 着 我 


可 以 从 Chrome 浏 览 絮 的 文档 里 拖 动 一 个 元 素 , 然后 在 Firefox 浏 览 器 的 文档 里 释放 它 , 因为 拖 放 功 
能 的 支持 是 集成 在 操作 系统 里 的 ， 有 着 相同 的 特性 。 如 果 你 打开 一 个 文本 编辑 器 ， 输 入 单词 
banana， 选 中 它 然后 拖 动 到 浏览 器 的 释放 区 ,你 就 会 看 到 香蕉 的 图 像 被 显示 出 来 ,效果 和 我 们 拖 











动 同一 个 文档 里 的 某 个 img 元 素 一 样 。 
37.3.1 根据 数据 过 滤 被 拖 动 项 目 























可 以 用 DataTransfer 对 象 里 存放 的 数据 来 选择 我 们 愿意 在 释放 区 接受 哪些 种 类 的 元 素 。 代 码 





清单 37-6 展 示 了 具体 的 做 法 。 


代码 清单 37-6 ”使 用 DataTransfer 对 和 象 过 滤 被 拖 动 元 素 


<script> 
var src = document.getElementById("src"); 


var target = document.getElementById("target"); 
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target.ondragenter = handleDrag; 
target.ondragover = handleDrag; 


function handleDrag(e) { 
if (e.dataTransfer.getData("Text") == "banana") { 
e.preventDefault(); 
} 
} 


target.ondrop = function(e) { 
var droppedID = e.dataTransfer.getData("Text"); 
var newElem = document.getElementById(droppedID).cloneNode(false); 
target.innerHTML - ""; 
target.appendChild(newElem); 
e.preventDefault(); 


an 
H 
e» 


.ondragstart = function(e) { 
e.dataTransfer.setData("Text", e.target.id); 
e.target.classList.add("dragged") ; 


src.ondragend = function(e) { 
var elems = document. querySelectorAll(".dragged"); 
for (var i = 0; i < elems.length; i++) { 
elems[i].classList.remove("dragged") ; 
} 
} 


</script> 


在 这 个 例子 里 ， 我 从 DataTransfer 对 象 获得 数据 值 ， 然 后 检查 它 是 什么 。 我 表明 只 有 当 数 据 
值 是 panana 时 才 愿 意 接受 被 拖 动 的 元 素 。 这 么 做 的 效果 是 过 滤 掉 了 苹果 和 樱桃 的 图 像 。 当 用 户 拖 
动 这 些 图 像 到 释放 区 时 ,浏览 器 会 提示 它们 不 能 被 释放 。 



































提示 “这 种 过 滤 方 式 在 Chrome 浏 览 器 里 不 可 用 ， 因 为 在 dragenter 和 dragoveT 事 件 的 处 理 函 数 里 
调用 getData 方 法 是 无 效 的 。 


37.3.2 ” 拖 放 文件 


男 一 种 深 深 隐藏 在 浏览 器 里 的 HTML5 新 功能 被 称 为 文件 API (File API )， 它 人 允许 我 们 使 用 本 
机 文件 ， 不 过 是 以 严格 受 控 的 方式 。 部 分 控制 来 自 于 我 们 通常 不 直接 与 文件 API 进 行 交互 ， 而 是 
使 它 通过 其 他 功能 显露 出 来 ， 包 括 拖 放 功 能 。 代 码 清单 37-7 展 示 了 如 何 使 用 文件 API， 在 用 户 从 
操作 系统 里 拖 动 文件 并 放 入 我 们 的 释放 区 时 作出 响应 。 
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代码 清单 37-7 “处 理 文件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
body > * {float: left;} 
target {border: medium double black; margin:4px; height: 75px; 
width: 200px; text-align: center; display: table; } 
target > p (display: table-cell; vertical-align: middle; } 
table (margin: 4px; border-collapse: collapse; } 
th, td {padding: 4px}; 
</style> 
</head> 
<body> 
<div id="target"> 
<p id="msg">Drop Files Here</p> 
</div> 
<table id="data" border="1"> 
</table> 








<script> 
var target = document.getElementById("target"); 


target.ondragenter = handleDrag; 
target.ondragover = handleDrag; 





function handleDrag(e) { 
e.preventDefault(); 
j 


target.ondrop = function(e) { 
var files = e.dataTransfer. files; 
var tableElem = document.getElementById("data"); 
tableElem.innerHTML = "<tr><th>Name</th><th>Type</th><th>Size</th></tr>"; 
for (var i = 0; i < files.length; i++) { 
var row = "<tr><td>" + files[i].name + "</td><td>" + 
files[i].type* "</td><td>" + 
files[i].size + "</td></tr>"; 
tableElem.innerHTML += row; 
} 
e.preventDefault(); 
} 
</script> 
</body> 
</html> 


当 用 户 把 文件 放 入 我 们 的 释放 区 时 , DataTransfer 对 象 的 文件 属性 会 返回 一 个 FileList 对 象 。 
我 们 可 以 将 它 视 为 一 个 由 File 对 象 构成 的 数组 , 每 个 对 象 都 代表 用 户 释放 的 一 个 文件 ( 用户 可 以 
选择 多 个 文件 然后 一 次 性 释放 它们 )。 表 37-7 展 示 了 File 对 象 的 属性 。 
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表 37-7” File 对象 定 义 的 属性 














名 称 说 明 E E 
name 获取 文件 名 字符 串 
type 获取 文件 类 型 ， 以 MIME 类 型 表示 字符 串 
size 获取 文件 大 小 〈 以 字 节 计算 ) 数值 











在 这 个 例子 里 ，script 枚 举 了 放 入 释放 区 的 文件 ， 并 在 一 张 表格 里 显示 了 File 属 性 的 值 。 从 
图 37-6 可 以 看 到 它 的 效果 ， 此 时 我 已 经 把 一 些 示 例文 件 放 入 释放 区 了 。 


(=) 




















e Example 
€ CO titan/listings/example.htm WoW 


| Name Type | Size 

| gene Example html texthtm] | 1658 

| T | 
| 














lemon.png |image/png | 6298 
cherries html | text/html |1075 








cherries.png | image/png | 7659 

















U - 一 - y 


图 37-6 “显示 与 文件 有 关 的 数据 





在 表单 里 上 传 被 释放 文件 
我 们 可 以 结合 拖 放 功 能 、 文 件 API 和 用 Ajax 请 求 上 传 数据 ， 让 用 户 能 从 操作 系统 拖 动 想 要 在 
表单 里 提交 的 文件 。 代 码 清单 37-8 对 此 进行 了 演示 。 


代码 清单 37-8 ”结合 拖 放 、 文 件 API 和 FormData 对 象 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
.table {display: table; } 
.row {display:table-row; } 
.cell (display: table-cell; padding: 5px; } 
abel (text-align: right; } 
target (border: medium double black; margin:4px; height: 50px; 
width: 200px; text-align: center; display: table; } 
#target > p (display: table-cell; vertical-align: middle; } 
</style> 
</head> 
<body> 
<form id="fruitform" method="post" action="http://titan:8080/form" > 
<div class="table"> 
<div class="row"> 
<div class="cell label">Bananas:</div> 


Hoe 
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<div class="cell"><input name="bananas" value="2"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Apples:</div> 
<div class="cell"><input name="apples" value="5"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Cherries:</div> 
<div class="cell"><input name="cherries" value="20"/></div> 
</div> 
<div class="row"> 
<div class="cell label">File:</div> 
<div class="cell"><input type="file" name="file"/></div> 
</div> 
<div class="row"> 
<div class="cell label">Total:</div> 
<div id="results" class="cell">0 items</div> 
</div> 
</div> 
<div id="target"> 
<p id="msg">Drop Files Here</p> 
</div> 
<button id="submit" type="submit">Submit Form</button> 
</form> 
<script> 
var target = document.getElementById("target"); 
var httpRequest; 
var fileList; 




















document.getElementById("submit").onclick = handleButtonPress; 
target.ondragenter - handleDrag; 
target.ondragover - handleDrag; 





function handleDrag(e) { 
e.preventDefault(); 
j 


target.ondrop - function(e) ( 
filelist - e.dataTransfer.files; 
e.preventDefault(); 

) 


function handleButtonPress(e) ( 
e.preventDefault(); 


var form = document.getElementById("fruitform"); 
var formData = new FormData(form) ; 


if (fileList || true) { 
for (var i = 0; i< fileList.length; i++) { 
formData.append("file" + i, fileList[i]); 
} 
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ttpRequest = new XMLHttpRequest(); 
ttpRequest.onreadystatechange = handleResponse; 
ttpRequest.open("POST", form.action); 
ttpRequest.send(formData); 


Dom 


} 


function handleResponse() { 
if (httpRequest.readyState == 4 && httpRequest.status == 200) { 
var data = JSON.parse(httpRequest.responseText); 
document. getElementById("results").innerHTML = "You ordered " 
+ data.total + " items"; 





} 
} 
</script> 
</body> 
</html> 


在 这 个 例子 里 ， 我 给 来 自 第 33 章 的 示例 添加 了 一 个 释放 区 ， 在 那个 例子 中 我 演示 了 如 何 用 
FormData 对 象 上 传 表单 数据 到 服务 器 。 我 们 可 以 用 FormData.append 方 法 添加 那些 放 入 释放 区 的 文 
fF, 并 传递 一 个 File 对 象 作 为 此 方法 的 第 二 个 参数 。 当 表单 被 提交 时 , 文件 内 容 会 作为 表单 请 求 
的 一 部 分 自动 上 传 到 服务 器 。 





37.4 小结 


本 章 向 你 展示 了 对 拖 放 元 素 的 支持 。 这 项 功能 的 实现 还 不 尽 如 人 意 , 但 它 的 前 景 光 明 , 我 预 
计 主 流 浏览 器 不 久 就 会 开始 着 手 处 理 不 一 致 性 的 问题 。 如 果 你 等 不 到 那 一 天 ( 或 者 你 不 在 乎 能 否 
与 其 他 浏览 器 和 操作 系统 相互 拖 放 文 件 )， 那么 你 应 该 考虑 使 用 一 个 JavaScript 库 ， 如 jQuery 和 
jQuery UI. 
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地 理 定 位 〈Geolocation ) API 让 我 们 可 以 获取 关于 用 户 当 前 地 理 位 置 的 信息 (或 者 至 少 是 正 
在 运行 浏览 器 的 系统 的 位 置 ), 它 不 是 HTML5 规 范 的 一 部 分 , 但 经 常 被 归 组 到 与 HTML5 相 关 的 新 
功能 中 。 表 38-1 提 供 了 本 章 内 容 概要 。 


表 38-1 本章 内 容 概 要 




























































































问 A 解决 方案 代码 清单 
获取 当前 位 置 史 用 getCurrentPosition 方 法 ， 提 供 一 个 位 置信 息 可 用 时 要 调用 的 函数 38-1 
处 理 地 理 定位 错误 句 getCurrentPosition 方 法 传递 第 二 个 参数 ， 指 定 一 个 发 生 错 误 时 要 调用 38-2 
的 函数 
指定 地 理 定位 请 求 的 选项 ”向 getCurrentPosition 方 法 传递 第 三 个 参数 ， 指 定 所 需 的 选项 38-3 
监控 位 置 更 用 watchPosition 和 clearWatch 方 法 38-4 

















38.1 使 用 地 理 定 位 


我 们 通过 全 局 属性 navigator.geolocation 访 问 地 理 定位 功能 ， 它 会 返回 一 个 Geolocation 对 
象 。 表 38-2 介 绍 了 这 个 对 象 的 方法 。 











表 38-2 ”Geolocation 对 象 





名 o PW 说 明 i& 回 
getCurrentPosition(callback, errorCallback, options) 获取 当前 位 置 void 
watchPosition(callback, error, options) 开始 监控 当前 位 置 数值 
clearWatch(id) 停止 监控 当前 位 置 void 





获取 当前 位 置 

顾名思义 ，getCurrentPosition 方 法 能 获取 当前 的 位 置 ， 不 过 位 置信 息 不 是 由 函数 自身 返回 
的 。 我 们 需要 提供 一 个 成 功 的 回调 函数 , 它 会 在 位 置信 息 可 用 时 触发 (这样 做 考虑 到 了 请 求 位 置 
和 信息 变 得 可 用 之 间 可 能 会 有 延迟 )。 代 码 清单 38-1 展 示 了 如 何 用 这 个 方法 获得 位 置信 息 。 
代码 清单 38-1 获取 当前 位 置 


<!DOCTYPE HTML> 
<html> 
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<head> 
<title>Example</title> 
<style> 
table {border-collapse: collapse; } 
th, td {padding: 4px; } 
th (text-align: right; } 
</style> 
</head> 
<body> 
<table border="1"> 
<tr> 
<th>Longitude:</th><td id="longitude">-</td> 
«th»Latitude:«/th»«td id-"latitude"»-«/td» 


«th»Altitude:«/th»«td id-"altitude"»-«/td» 
«th»Accuracy:«/th»«td id-"accuracy"»-«/td» 








«th»Altitude Accuracy:«/th»«td id-"altitudeAccuracy"»-«/td» 
«th»Heading:«/th»«td id="heading">-</td> 


«th»Speed:«/th»«td id="speed">-</td> 

«th»Time Stamp:«/th»«td id-"timestamp"»-«/td» 
</tr> 

</table> 

<script> 
navigator.geolocation.getCurrentPosition(displayPosition); 





function displayPosition(pos) { 
var properties = ["longitude", "latitude", "altitude", "accuracy", 
"altitudeAccuracy", "heading", "speed"]; 
for (var i = 0; i < properties.length; i++) { 
var value = pos.coords[properties[i]]; 
document.getElementById(properties[i]).innerHTML - value; 


} 
document .getElementById("timestamp").innerHTML = pos.timestamp; 
} 
</script> 
</body> 
</html> 


这 个 例子 中 的 脚本 调用 了 getCurrentPosition， 并 传递 displayPosition 函 数 作为 该 方法 的 参 
数 。 当 位 置信 息 变 得 可 用 时 ,浏览 絮 就 会 调用 指定 函数 ， 并 传人 一 个 提供 位 置 详情 的 Position 对 
象 ( 详情 会 显示 在 一 个 table 元 素 的 单元 格 里 )。pPosition 对 象 非常 简单 ， 如 表 38-3 所 示 。 


表 38-3 ”Position 对 象 
































名 称 说 — HB 返 回 
coords 返回 当前 位 置 的 坐标 Coordinates 
timestamp 返回 获取 坐标 信息 的 时 间 字符 串 
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我 们 真正 感 兴 趣 的 是 Coordinates 对 象 ， 它 由 Position.coords JA 
Coordinates 对 象 的 属性 。 








3a 
EE 





性 返回 。 表 38-4 介 绍 了 








表 38-4  CoordinatesX]$& 










































































名 SN 说 — BH ik g 
latitude 返回 用 十 进 制度 表示 的 纬度 数值 
longitude 返回 用 十 进 制度 表示 的 经 度 数值 
altitude 返回 用 米 表示 的 海拔 高 度 数值 
accuracy 返回 用 米 表示 的 坐标 精度 数值 
altitudeAccuracy 返回 用 米 表 示 的 海拔 精度 数值 
heading 返回 用 度 表示 的 行进 方向 数值 
speed 返回 用 米 / 秒 表示 的 行进 速度 数值 


























不 是 所 有 Coordinates 对 象 的 数据 值 都 时 刻 可 用 。 浏 览 器 获取 位 置信 息 的 机 制 没 有 统一 的 规 
定 ， 所 使 用 的 技术 也 有 很 多 。 移 动 设备 越 来 越 多 地 配置 了 GPS、 加 速度 计 和 电子 罗盘 设备 ， 这 就 
意味 着 那些 平台 会 拥有 最 精确 和 最 完整 的 数据 。 

我 们 仍然 可 以 为 其 他 设备 获取 位 置信 息 : 浏览 器 使 用 的 一 种 地 理 定位 服务 会 尝试 根据 网 络 信 
息 确 定位 置 。 如 果 你 的 系统 里 有 Wi-Fi 适 配器 ， 那 么 信号 范围 内 的 网 络 就 会 与 一 份 网 络 目录 进行 
对 比 ， 这 份 目录 是 街道 级 景观 调查 ( 如 谷歌 街景 服务 ) 结果 的 一 部 分 。 如 果 没 有 Wi-Fi， 也 可 以 
用 ISP 所 提供 的 卫 地 址 获得 大 概 的 位 置 。 

通过 网 络 信息 推断 出 的 位 置 有 着 不 同 的 精度 , 但 它 可 以 做 到 惊人 的 准确 度 。 当 我 开始 测试 这 
项 功能 时 ,我 很 惊讶 它 报 告 的 位 置 范围 是 如 此 之 窗 。 事 实 上 ， 它 是 如 此 的 精确 ， 以 至 于 我 得 把 屏 
幕 截图 里 的 坐标 替换 成 帝国 大 厦 的 位 置 ， 因 为 通过 真实 的 位 置信 息 (来 源 于 我 家 及 附近 的 Wi-Fi 
网 络 ) 你 可 以 很 轻松 地 找到 我 的 房子 ， 看 到 我 车 道上 的 汽车 照片 。 这 东西 实在 很 可 怕 ， 所 以 当 文 
档 使 用 地 理 定位 功能 时 ， 所 有 浏览 器 会 做 的 第 一 件 事 就 是 询问 用 户 是 否 对 其 授权 。 从 图 38-1 可 以 
看 到 Chrome 浏 览 絮 是 如 何 做 的 。 
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© Example 过 证 a 
€ > Q | Otitan/listings/example.ntm wat 











[o | titan wants to track your physical location | Allow Deny Learn more X 





Longitude: | - Latitude: | - 
Altitude: | - Accuracy: | - 
Altitude Accuracy: | - Heading: | - 








Speed: | - | Time Stamp: | - 

















图 38-1 ”对 地 理 定位 功能 授权 














如 果 用 户 人 允许 此 请 求 ， 浏 览 器 就 能 获得 位 置信 息 ， 并 在 信息 可 用 时 调用 回调 函数 。 从 图 38-2 
可 以 看 到 我 的 台式 机 里 显示 了 哪些 可 用 数据 。 
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[ els Ew 
®© Example uS 
€ > Œ QOtitan/listings/example.htm Qiu 




















| Longitude: | -73.986171 Latitude: | 40.748716 

中 Altitude: Accuracy: | 69 

| Altitude Accuracy: Heading: 

| Speed: Time Stamp: | 1315990791832| | 











— 一 一 


图 38-2 ”显示 由 地 理 定位 服务 提供 的 位 置信 息 

我 用 来 写 书 的 电脑 没有 安装 任何 类 型 的 定位 专用 硬件 : 没有 GPS 、 电 子 罗 盘 、 高 度 计 或 者 加 
速度 计 。 因 为 这 个 原因 ， 可 用 的 数据 只 有 纬度 、 经 度 和 这 些 值 的 精度 。Chrome 浏 览 器 估计 我 的 
位 置 在 报告 位 置 的 69 米 (大约 是 75 人 码 ) 范围 内 ， 相 对 于 实际 情况 算是 低估 了 。 


















































提示 Chrome、Firefox 和 Opera 浏 览 器 都 使 用 谷歌 的 地 理 定位 服务 。Internet Explorer 和 Safari 则 
用 它们 自己 的 。 我 能 报告 的 只 有 我 的 位 置 ， 但 微软 服务 报告 的 精度 是 48 千 米 ( 大 约 是 30 
XY), 我 发 现 数据 的 实际 精度 大 约 是 3 英里 。 苹 果 服 务 报告 的 精度 是 500 米 ,但 提供 了 几 
家 中 最 精确 的 数据 : 它 确定 的 位 置 只 差 几 英尺 ， 厉 害 ! 
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我 们 可 以 给 getCurrentPosition 方 法 提供 第 二 个 参数 ， 它 让 我 们 可 以 指定 一 个 函数 ， 在 获取 
位 置 发生 错 误 时 调用 它 。 此 函数 会 获得 一 个 PositionError 对 象 ， 它 定义 的 属性 如 表 38-5 所 示 。 


表 38-5 PositionError 对 象 























名 称 说 明 iR [s] 
code 返回 代表 错误 类 型 的 代码 数值 
message 返回 描述 错误 的 字符 串 字符 串 

















code 属 性 有 三 个 可 能 的 值 。 表 38-6 介 绍 了 这 些 值 。 


表 38-6 ”PositionError.code 属 性 的 值 



































{fi 说 有 明 

1 用 户 未 授权 使 用 地 理 定位 功能 
2 不 能 确定 位 置 

3 请 求 位 置 的 尝试 已 超时 








代码 清单 38-2 展 示 了 我 们 可 以 如 何 用 PositionError 对 象 接 收 错误 。 
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代码 清单 38-2 使 用 PositionError 对 象 处 理 错误 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<style> 
table {border-collapse: collapse; } 
th, td {padding: 4px; } 
th (text-align: right; } 
</style> 
</head> 
<body> 
<table border="1"> 
<tr> 
<th>Longitude:</th><td id="longitude">-</td> 
<th>Latitude:</th><td id="latitude">-</td> 
</tr> 
<tr> 
«th»Altitude:«/th»«td id="altitude">-</td> 
«th»Accuracy:«/th»«td id="accuracy">-</td> 
</tr> 
<tr> 
«th»Altitude Accuracy:</th><td id="altitudeAccuracy">-</td> 
<th>Heading:</th><td id="heading">-</td> 
</tr> 
<tr> 
<th>Speed:</th><td id="speed">-</td> 
<th>Time Stamp:</th><td id="timestamp">-</td> 
</tr> 
<tr> 
<th>Error Code:</th><td id="errcode">-</td> 
<th>Error Message:</th><td id-"errmessage"»-«/td» 
</tr> 
</table> 
<script> 


navigator.geolocation.getCurrentPosition(displayPosition, handleError) ; 


function displayPosition(pos) { 
var properties = ["longitude", "latitude", "altitude", "accuracy", 
"altitudeAccuracy", "heading", "speed"]; 


for (var i = 0; i « properties.length; i++) { 
var value - pos.coords[properties[i]]; 
document.gettlementById(properties[i]).innerHTML = value; 
] 
document.gettlementById("timestamp").innerHTML = pos.timestamp; 
} 


function handleError(err) { 
document .getElementById("errcode").innerHTML = err.code; 
document .getElementById("errmessage").innerHTML = err.message; 
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</script> 
</body> 
</html> 


制造 错误 最 简单 的 方式 是 在 浏览 器 提示 时 拒绝 授权 。 这 个 例子 的 脚本 在 table 元 素 里 显示 了 
错误 细节 ， 从 图 38-3 可 以 看 到 它 的 效果 。 
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= 2 Se) 
/ © Example e 
€ > CG |Qtitan/listings/example.htm Qi X 
Longitude: | - Latitude: | - 
Altitude: | - Accuracy: | - 
| Altitude Accuracy: | - Heading: |- 
Speed: | - Time Stamp: | - | 
Error Code: | 1 | Error Message: | User denied Geolocation | 
L 
































图 38-3 ”显示 地 理 定位 错误 的 细节 
38.3 ”指定 地 理 定 位 选项 


我 们 可 以 给 getCurrentPosition 方 法 提供 的 第 三 个 参数 是 一 个 Position0ptions 对 象 。 这 个 功 
能 允许 我 们 可 以 部 分 控制 位 置信 息 的 获取 方式 。 表 38-7 展 示 了 这 个 对 象 定义 的 属性 。 


表 38-7 ”Position0ptions 对 象 
































名 mm 说 明 i& E 
enableHighAccuracy 告诉 浏览 需 我 们 希望 得 到 可 能 的 最 佳 结 布尔 值 
timeout 限制 请 求 位 置 的 时 间 ， 设 置 多 少 毫秒 后 会 报告 一 个 超时 错误 数值 
maximumAge EUN ar RR Ze, AEE ANE PE EL 数值 











设置 highAccuracy 属 性 为 true 只 是 请 求 浏览 器 给 出 可 能 的 最 佳 结 果 ， 并 不 保证 得 到 的 位 置 一 
定 会 更 准确 。 对 移动 设备 来 说 ,获得 更 准确 位 置 的 可 能 方式 是 禁用 节能 模式 , 或 者 在 某 些 情况 下 
打开 GPS 功 能 ( 低 精度 位 置信 息 可 能 来 源 于 Wi-Fi 或 基站 数据 )。 其 他 设备 则 可 能 无 法 获得 更 高 精 
度 的 数据 。 代 码 清单 38-3 展 示 了 我 们 在 请 求 位 置 时 如 何 使 用 Position0ptions 对 象 。 


代码 清单 38-3 ”在 请 求 位 置 数据 时 指定 选项 


<!DOCTYPE HTML» 
<html> 
<head> 


<title>Example</title> 

<style> 
table {border-collapse: collapse; } 
th, td (padding: 4px; } 
th (text-align: right; } 
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</style> 
</head> 
<body> 
<table border="1"> 
«tr» 
«th»Longitude:«/th»«td id="longitude">-</td> 
«th»Latitude:«/th»«td id="latitude">-</td> 


«th»Altitude:«/th»«td id-"altitude"»-«/td» 
«th»Accuracy:«/th»«td id-"accuracy"»-«/td» 





«th»Altitude Accuracy:«/th»«td id-"altitudeAccuracy"»-«/td» 
«th»Heading:«/th»«td id="heading">-</td> 


«th»Speed:«/th»«td id="speed">-</td> 
«th»Time Stamp:«/th»«td id-"timestamp"»-«/td» 


«th»Error Code:«/th»«td id-"errcode"»-«/td» 

«th»Error Message:«/th»«td id="errmessage">-</td> 
</tr> 

</table> 

<script> 





var options = { 
enableHighAccuracy: false, 
timeout: 2000, 
maximumAge: 30000 


h 


navigator.geolocation.getCurrentPosition(displayPosition, 
handleError, options); 


function displayPosition(pos) { 
var properties = ["longitude", "latitude", "altitude", "accuracy", 


"altitudeAccuracy", "heading", "speed"]; 


for (var i = 0; i < properties.length; i++) { 

var value - pos.coords[properties[i]]; 
document.gettlementById(properties[i]).innerHTML = value; 
} 
document.getElementById("timestamp").innerHTML = pos.timestamp; 


} 


function handleError(err) { 
document.gettlementById("errcode").innerHTML = err.code; 
document.gettlementById("errmessage").innerHTML = err.message; 








} 


</script> 
</body> 
</html> 
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这 个 脚本 有 一 处 不 寻常 的 地 方 : 我 们 没有 创建 一 个 新 的 Position0ptions 对 象 , 而 是 创建 了 一 
个 普通 的 0bject， 并 定义 了 表格 里 的 那些 属性 。 在 这 个 例子 里 , 我 表明 了 不 要 求 获得 最 高 级 的 精 
度 ， 并 准备 在 请 求 超时 前 等 待 2 秒 ， 而 且 愿 意 接 受 绥 存 了 不 超过 30 秒 的 数据 。 


























38.44 ”监控 位 置 


可 以 用 watchPosition 方 法 不 断 获 得 关于 位 置 的 更 新 。 这 个 方法 所 需 的 参数 和 
getCurrentPosition 方 法 相同 ， 工 作 方 式 也 一 样 。 它 们 的 区 别 在 于 : 随 着 位 置 发 生 改 变 ， 回 调 函 
数 会 被 反复 地 调用 。 代 码 清 单 38-4 展 示 了 如 何 使 用 watchPosition 方 法 。 
代码 清单 38-4 ”使 用 watchPosition 方 法 


<!DOCTYPE HTML» 








<html> 
<head> 
<title>Example</title> 
<style> 
table {border-collapse: collapse; } 
th, td (padding: 4px; } 
th (text-align: right; } 
</style> 
</head> 
<body> 
<table border="1"> 


<tr> 
«th»Longitude:«/th»«td id-"longitude"»-«/td» 
«th»Latitude:«/th»«td id-"latitude"»-«/td» 


«th»Altitude:«/th»«td id-"altitude"»-«/td» 
«th»Accuracy:«/th»«td id-"accuracy"»-«/td» 











«th»Altitude Accuracy:«/th»«td id-"altitudeAccuracy"»-«/td» 
«th»Heading:«/th»«td id="heading">-</td> 





«th»Speed:«/th»«td id="speed">-</td> 
«th»Time Stamp:«/th»«td id-"timestamp"»-«/td» 


«th»Error Code:</th><td id="errcode">-</td> 

<th>Error Message:</th><td id="errmessage">-</td> 
</tr> 

</table> 

<button id="pressme">Cancel Watch</button> 

<script> 





var options = { 
enableHighAccuracy: false, 
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timeout: 2000， 
maximumAge: 30000 


h 

var watchID = navigator.geolocation.watchPosition(displayPosition, 
handleError, 
options); 


document.getElementById("pressme").onclick = function(e) ( 
navigator.geolocation.clearWatch(watchID); 
h 


function displayPosition(pos) { 


var properties = ["longitude", "latitude", "altitude", "accuracy", 
"altitudeAccuracy", "heading", "speed"]; 


for (var i = 0; i « properties.length; i++) { 
var value - pos.coords[properties[i]]; 


document.gettlementById(properties[i]).innerHTML = value; 
} 


document.getElementById("timestamp").innerHTML = pos.timestamp; 


} 


function handleError(err) { 
document .gettlementById("errcode").innerHTML = err.code; 
document.gettlementById("errmessage").innerHTML = err.message; 





} 


</script> 
</body> 
</html> 
在 这 个 例子 里 ， a 当 我 们 想 要 停止 监控 时 ， 可 以 把 此 
方法 返回 的 ID 值 传 递 给 clearwatch 方 法 。 我 选择 在 button 按 钮 被 按 下 时 执行 这 个 操作 。 
警告 ”当前 版 本 的 主流 浏览 器 还 没有 很 好 地 实现 watchPosition 方 法 ， 地 址 更 新 也 时 有 时 无 。 对 


你 来 说 ， 更 好 的 选择 可 能 是 使 用 一 个 计时 器 〈 我 在 第 27 章 介绍 过 ) 来 周期 性 地 调用 
getCurrentPosition 方 法 。 


38.5 小结 


本 章 介 绍 了 地 理 定位 API， 它 提供 了 浏览 器 宿主 系统 的 当前 位 置信 息 。 介 绍 了 浏览 器 通过 不 
同 的 机 制 获取 位 置 数据 ， 而 位 置 数据 的 获取 也 并 不 仅 限于 那些 支持 GPS 的 设备 。 














使 用 Web 存 储 











Web 存 储 人 允许 我 们 在 浏览 器 里 保存 简单 的 键 / 值 数 据 。Web 存 储 和 cookie 很 相似 ， 但 它 有 着 更 
好 的 实现 方式 , 能 保存 的 数据 量 也 更 大 。 这 两 种 类 型 共享 相同 的 机 制 , 但 是 被 保存 数据 的 可 见 性 
和 寿命 存在 区 别 。 表 39-1 提 供 了 本 章 内 容 概要 。 























提示 还 有 一 种 存储 规范 名 为 “索引 数据 库 API”( Indexed Database API )， 它 允许 保存 富 格式 数 
据 和 进行 SQL 风格 的 查询 。 在 本 书 编写 过 程 中 ， 这 个 规范 还 未 定型 ， 浏 览 器 的 实现 方式 
还 是 实验 性 和 不 稳定 的 。 


表 39-1 本章 内 容 概要 


























jg a 解决 方案 代码 清单 
在 浏览 器 里 保存 持久 性 数据 用 1localSstorage 属 性 获取 一 个 Storage 对 象 39-1 
监控 由 其 他 同 源 文档 所 导致 的 存储 变化 处 理 storage 事 件 39-2 
在 浏览 器 里 保存 临时 数据 用 sessionStorage 属 性 获取 一 个 storage 对 象 39-3 
监控 顶级 浏览 上 下 文 的 存储 变化 处 理 storage 事 件 ant 








39.1 使 用 本 地 存储 


我 们 可 以 通过 全 局 属性 localStorage 访 问 本 地 存储 功能 。 这 个 属性 会 返回 一 个 Storage 对 象 ， 
表 39-2 对 其 进行 了 介绍 。storage 对 象 被 用 来 保存 键 / 值 形 式 的 字符 串 对 。 
表 39-2 Storage 对 象 
























































名 称 说 明 iR 回 
clear() 移 除 保存 的 键 / 值 对 void 
getItem(<key>) 取得 与 指定 键 关联 的 值 字符 串 
key(<index>) 取得 指定 索引 的 键 字符 串 
length 返回 已 保存 的 键 / 值 对 数量 数值 
ITemoveItem(<key>) 移 除 指定 键 对 应 的 键 / 值 对 字符 串 
setItem(<key>, <value>) 添加 一 个 新 的 键 / 值 对 ， 如 果 键 已 使 用 就 更 新 它 的 值 void 
[«key»] 数组 的 访问 形式 取得 与 指定 键 关联 的 值 字符 串 
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Storage 对 象 可 用 来 存储 键 / 值 对 ， 其 中 键 和 值 都 是 字符 串 。 键 必须 是 唯一 的 ， 这 就 意味 着 如 
果 我 们 用 Storage 对 象 里 已 经 存在 的 键 调用 setItem 方 法 ， 就 会 更 新 它 的 值 。 代 码 清单 39-1 展 示 了 
如 何 添加 、 修 改 和 清除 本 地 存储 中 的 数据 。 
代码 清单 39-1 使 用 本 地 存储 


<!DOCTYPE HTML> 














<html> 
<head> 
<title>Example</title> 
<style> 
body > * {float: left;} 
table {border-collapse: collapse; margin-left: 50px} 
th, td (padding: 4px; } 
th (text-align: right;] 
input (border: thin solid black; padding: 2px;] 
abel (min-width: 50px; display: inline-block; text-align: right;] 
countmsg, #buttons (margin-left: 50px; margin-top: 5px; margin-bottom: 5px; } 
</style> 
</head> 
<body> 
<div> 
<div><label>Key:</label><input id="key" placeholder="Enter Key"/></div> 
<div><label>Value:</label><input id="value" placeholder="Enter Value"/></div> 
<div id="buttons"> 
<button id="add">Add</button> 
<button id="clear">Clear</button> 
</div> 
<p id="countmsg">There are <span id="count"></span> items</p> 
</div> 


<table id="data" border="1"> 
<tr><th>Item Count:</th><td id="count">-</td></tr> 
</table> 


<script> 
displayData(); 


var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 


} 


function handleButtonPress(e) { 
switch (e.target.id) { 

case 'add': 
var key = document.getElementById("key").value; 
var value = document.getElementById("value").value; 
localStorage.setItem(key, value); 
break; 

case 'clear': 
localStorage.clear(); 


39.1 使 用 本 地 存储 813 





break; 


} 
displayData(); 


function displayData() { 
var tableElem = document.getElementById("data") ; 
tableElem.innerHTML = ""; 
var itemCount = localStorage.length; 
document.getElementById("count").innerHTML = itemCount; 
for (var i = 0; i « itemCount; i++) { 
var key - localStorage.key(i); 
var val - localStorage[key]; 
tableElem.innerHTML += "«tr»«th»" + key + ":</th><td>" 
+ val + "</td></tr>"; 
} 
} 
</script> 
</body> 
</html> 


在 这 个 例子 里 ， 我 报告 了 本 地 存储 中 的 项 目 数 量 ， 并 枚 举 已 保存 的 键 / 值 对 来 填充 一 个 表格 
元 素 。 我 添加 了 两 个 input 元 素 ， 在 Add( 添加 ) 按钮 被 按 下 时 将 它们 的 内 容 保存 为 项 目 。 在 响应 
Clear (清除 ) 按钮 时 ， 我 会 清除 本 地 存储 中 的 内 容 。 从 图 39-1 可 以 看 到 它 的 效果 。 








T 

















© Example x Ve 
c Q |Q titan/listings/example.html XA 


KeylEnterKey č ] Banana: | Yellow | 
Value-[EnterVaiue |] Apple: Green | 
Cherry: | Red | 





There are 3 items 























图 39-1 ”使 用 本 地 存储 


浏览 器 不 会 删除 我 们 用 localStorage 对 象 添加 的 数据 ， 除 非 用 户 自 己 清除 浏览 数据 。( 规范 
还 允许 数据 因为 安全 原因 被 移 除 ， 但 并 没有 说 明 什么 样 的 安全 原因 需要 删除 本 地 数据 。) 








监听 存储 事件 


通过 本 地 存储 功能 保存 的 数据 对 所 有 来 源 相 同 的 文档 都 是 可 用 的 。 某 个 文档 对 本 地 存储 进行 
修改 时 会 触发 storage 事 件 ， 我们 可 以 监听 其 他 同 源 文档 上 的 这 个 事件 来 确保 我 们 能 跟 上 最 新 的 
变化 。 


与 storage 事 件 同 时 指派 的 对 象 是 一 个 StorageEvent 对 象 ， 它 的 成 员 如 表 39-3 所 示 。 
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表 39-3 StorageEvent 对 象 





















































名 W 说 — Hj iR E 
key 返回 发 生变 化 的 键 字符 串 
oldvalue 返回 关联 此 键 的 旧 值 字符 串 
newValue 返回 关联 此 键 的 新 值 字符 串 
url 返回 制造 变化 的 文档 URL 字符 串 
storageArea 返回 发 生变 化 的 storage 对 象 Storage 


代码 清单 39-2 展 示 了 一 个 文档 ， 我 将 其 保存 为 storage.html。 它 会 监听 并 编 录 本 地 存储 对 象 上 
触发 的 事件 。 


代码 清单 39-2 编 录 本 地 存储 事件 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Storage</title> 
<style> 
table {border-collapse: collapse; } 
th, td {padding: 4px; } 
</style> 
</head> 
<body> 
<table id="data" border="1"> 
<tr> 
<th>key</th> 
<th>oldValue</th> 
<th>newValue</th> 
«th»url«/th» 
<th>storageArea</th> 
</tr> 
</table> 
<script> 
var tableElem = document.getElementById("data") ; 




















window.onstorage = handleStorage; 


function handleStorage(e) { 
var row = "<tr>"; 
row += "<td>" + e.key + "</td>"; 
row += "<td>" + e.oldValue + "</td>"; 
row += "<td>" + e.new/alue + "</td>"; 
row += "<td>" + e.url + "</td>"; 
row += "<td>" + (e.storageArea == localStorage) + "</td></tr>"; 
tableElem.innerHTML += row; 
} 


</script> 
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</body> 
</html> 


storage 事 件 是 通过 Nindow 对 象 触发 的 , 此 对 象 可 以 来 自 共 享 被 改动 存储 的 任何 一 个 文档 。 
在 这 个 例子 里 ， 每 次 接收 到 事件 时 我 都 会 给 table 元 素 添加 一 个 新 行 ， 从 图 39-2 可 以 看 到 它 的 
效果 。 
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am 2g 
/ © bample © storage Um 
|€ Œ |Q titan/listings/storage.htm XA | 
key |oldValue | newValue url storageArea 
Banana | null Yellow http://titan/listings/example.html | true 
Apple |null [Red http://titan/listings/example.html | true 
Apple |Red Green http://titan/listings/example html | true 
Cherry | null Red http://titan/listings/example.html | true 
null null null http://titan/listings/example html | true 
d J 








图 39-2 ”显示 存储 事件 的 细节 


中 的 事件 展示 了 我 给 本 地 存储 添加 新 项 目的 过 程 。 它 们 的 顺序 是 : 
口 添加 一 个 新 对 Banana/Yellow; 
口 添加 一 个 新 对 Apple/Red; 
口 更 新 Apple 关 联 的 值 为 Green; 
口 添加 一 个 新 对 Cherry/Red; 
O 按 下 Clear 按 钮 ( 它 会 调用 clear 方 法 )。 

可 以 看 到 ， 如 果 事 件 里 没有 可 报告 的 值 ， 就 会 使 用 nul1。 举 个 例子 ， 当 我 给 存储 添加 一 个 新 
项 目 时 ,oldValue 属 性 会 返回 null。 表 格 里 最 后 一 个 事件 的 key 、oldValue 和 newValue 属 性 都 是 null。 
这 个 事件 在 clear 方 法 被 调用 时 触发 ， 该 方法 会 从 存储 中 移 除 所 有 的 项 目 。 

url 属 性 能 帮助 我 们 了 解 是 哪个 文档 触发 了 变化 。storageArea 属 性 会 返回 发 生变 化 的 Storage 
对 象 ， 它 可 以 是 本 地 或 会 话 存储 对 象 (我 稍 后 会 解释 会 话 存储 )。 这 个 例子 里 ， 我 们 只 接收 来 自 
本 地 存储 对 象 的 事件 。 


















































注意 ”这些 事 件 不 会 在 制造 变化 的 文档 内 指派 。 我 猜想 这 大 概 是 认为 我 们 已 经 知道 发 生 了 什么 。 
这 些 事件 只 在 其 他 同 源 文 档 里 可 用 。 


39.2 ”使 用 会 话 存 储 
会 话 存 储 (session storage ) 的 工作 方式 和 本 地 存储 很 接近 , 不 同 之 处 在 于 数据 是 各 个 浏览 
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下 文科 有 的 ， 会 在 文档 被 关闭 时 移 除 。 我 们 通过 全 局 变量 sessionstorage 访 问 会 话 存储 ， 它 会 返 
回 一 个 Storage 对 象 (在 表 39-2 介 绍 过 )。 代 码 清 单 39-3 展 示 了 会 话 存储 的 用 法 。 


代码 清单 39-3 ”使 用 会 话 存储 


<!DOCTYPE HTML> 








<html> 
<head> 
<title>Example</title> 
<style> 
body > * {float: left;} 
table {border-collapse: collapse; margin-left: 50px} 
th, td (padding: 4px; } 
th (text-align: right;] 
input (border: thin solid black; padding: 2px;] 
abel (min-width: 50px; display: inline-block; text-align: right;] 
countmsg, #buttons (margin-left: 50px; margin-top: 5px; margin-bottom: 5px; } 
</style> 
</head> 
<body> 
<div> 
<div><label>Key:</label><input id="key" placeholder="Enter Key"/></div> 
<div><label>Value:</label><input id="value" placeholder="Enter Value"/></div> 
<div id="buttons"> 
<button id="add">Add</button> 
<button id="clear">Clear</button> 
</div> 
<p id="countmsg">There are <span id="count"></span> items</p> 
</div> 


<table id="data" border="1"> 
<tr><th>Item Count:</th><td id="count">-</td></tr> 
</table> 


<script> 
displayData(); 


var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 


} 


function handleButtonPress(e) { 
switch (e.target.id) { 

case 'add': 
var key = document.getElementById("key").value; 
var value = document.gettlementById("value").value; 
sessionStorage.setItem(key, value); 
break; 

case 'clear': 
sessionStorage.clear(); 
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break; 
} 
displayData(); 
} 


function displayData() { 
var tableElem = document.getElementById("data") ; 
tableElem.innerHTML = ""; 
var itemCount = sessionStorage. length; 
document.getElementById("count").innerHTML = itemCount; 
for (var i = 0; i < itemCount; i++) { 
var key = sessionStorage.key(i); 
var val = sessionStorage[key]; 
tableElem.innerHTML += "«tr»«th»" + key + ":</th><td>" 
+ val + "</td></tr>"; 
} 
} 


</script> 
</body> 
</html> 


这 个 例子 的 工作 方式 和 之 前 本 地 存储 的 例子 很 接近 ， 不 同 之 处 在 于 可 见 性 和 寿命 受到 限制 。 
这 些 限 制 会 影响 storage 事 件 的 处 理 方式 :前 面 提 到 过 storage 事 件 只 会 在 共享 存储 的 文档 中 触发 。 
对 于 会 话 存储 ， 这 就 意味 着 事件 只 会 在 内 航 文 档 中 触发 ， 比 如 iframe 里 的 文档 。 代 码 清单 39-4 展 











示 了 一 个 包含 storage.html 文 档 的 iframe 被 添加 到 之 前 的 例子 中 。 
代码 清单 39-4 ”使 用 会 话 存储 的 storage 事 件 


<!DOCTYPE HTML> 
«html» 
«head» 
<title>Example</title> 
<style> 
body > * (float: left; } 
table {border-collapse: collapse; margin-left: 50px} 
th, td (padding: 4px;] 
th (text-align: right;] 
input (border: thin solid black; padding: 2px;] 
abel (min-width: 50px; display: inline-block; text-align: right;] 
#countmsg, #buttons (margin-left: 50px; margin-top: 5px; margin-bottom: 5px; } 
iframe {clear: left;} 
</style> 
</head> 
<body> 
<div> 
<div><label>Key:</label><input id="key" placeholder="Enter Key"/></div> 
<div><label>Value:</label><input id-"value" placeholder-"Enter Value"/></div> 
<div id="buttons"> 
<button id="add">Add</button> 
<button id="clear">Clear</button> 
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</div> 
<p id="countmsg">There are <span id="count"></span> items</p> 
</div> 


<table id="data" border="1"> 
<tr><th>Item Count:</th><td id="count">-</td></tr> 
</table> 


<iframe src="storage.html" width="500" height="175"></iframe> 


<script> 
displayData(); 


var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 


} 


function handleButtonPress(e) { 
switch (e.target.id) { 
case 'add': 
var key = document.getElementById("key").value; 
var value = document.getElementById("value").value; 
sessionStorage.setItem(key, value); 
break; 
case 'clear': 
sessionStorage.clear(); 
break; 
} 
displayData() ; 
} 


function displayData() { 
var tableElem = document.getElementById("data"); 
tableElem.innerHTML = ""; 
var itemCount = sessionStorage. length; 
document.getElementById("count").innerHTML = itemCount; 
for (var i = 0; i < itemCount; i++) { 
var key = sessionStorage.key(i); 
var val = sessionStorage[key ]; 
tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" 
+ val + "</td></tr>"; 
} 
} 
</script> 
</body> 
</html> 


从 图 39-3 可 以 看 到 这 些 事件 的 报告 。 


中 
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J © Bample x X 中 
€ Œ | © titan/listings/example.html 3X 
Key(Chery | Banana: | Yellow 
Value:| Red Apple: | Green 
Cherry: | Red 


There are 3 items 














key |oldValue | newValue url storageArea| 
Banana | null Yellow http://titan/listings/example.html | false | 
Apple [mull [Red  [http:/titan/istings'example.html false | 
Green | http,//ttan/listings/example html | false | 
http://titan/listings/example.html 












































图 39-3 ”会 话 存储 的 storage 事 件 


39.3 ”小结 


本 章 介绍 了 Web 存 储 功能 , 它 允 许 我 们 在 浏览 器 里 保存 键 / 值 对 。 这 项 功能 很 简单 , 但 是 本 地 
存储 的 长 寿命 可 以 让 它 变 得 特别 有 用 ， 尤 其 是 用 来 保存 简单 的 用 户 偏好 。 





创建 离线 Wep 应 用 程序 








离线 应 用 程序 缓存 功能 允许 我 们 指定 Web 应 用 程序 所 需 的 全 部 资源 , 这样 浏览 器 就 能 在 加 载 
HIMI 文 档 时 把 它们 都 下 载 下 来 。 通 过 这 种 方式 ， 用 户 即使 无 法 访问 网 络 也 能 继续 使 用 我 们 的 应 
用 程序 。 

在 本 书 编写 过 程 中 , 浏览 器 对 本 章 所 介绍 功能 的 支持 千差万别 。 我 建议 你 将 本 章 视 为 一 个 指 
示 离 线 应 用 程序 常见 方向 的 路 标 ， 而 不 是 排他 性 的 参考 资料 。 表 40-1 提 供 了 本 章 内 容 概要 。 


#40-1 本章 内 容 概 要 









































































































































问 题 解决 方案 代码 清单 
启用 离线 缓存 创建 一 个 清单 文件 ， 并 在 html 元 素 的 manifest 属 性 里 引用 它 。 40-1 ~ 40-3 
指定 离线 应 用 程序 里 要 缓存 的 资源 在 清单 文件 的 顶部 或 者 CACHE 区 域 里 列 出 资源 40-4 
指定 资源 不 可 用 时 要 显示 的 备用 内 容 。 在 清单 文件 的 FALLBACK 区 域 里 列 出 内 容 40-5 ~ 40-8 
指定 始终 向 服务 器 请 求 的 资源 在 清单 文件 的 NETWORK 区 域 里 列 出 内 容 40-9 
判断 浏览 器 是 否 离线 读 取 window.navigator.onLine 属 性 的 值 40-10 
直接 使 用 离线 缓存 通过 读 取 window.applicationCache 属 性 获得 一 个 Application- 40-11 ~ 40-13 

Cache 对 象 


40.1 定义 问题 


为 了 理解 创建 离线 Web 应 用 程序 能 解决 什么 样 的 问题 ， 我 们 需要 一 个 例子 。 代 码 清单 40-1 展 
示 了 一 个 非常 简单 的 应 用 程序 ， 它 依赖 的 资源 会 根据 需要 从 服务 器 上 载 和 人。 


代码 清单 40-1 一 个 简单 的 Web 应 用 程序 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
img (border: medium double black; padding: 5px; margin: 5px; } 
</style> 
</head> 
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<body> 
<img id="imgtarget" src="banana100.png"/> 
<div> 
«button id="banana">Banana</button> 
«button id-"apple"»Apple«/button» 
«button id="cherries">Cherries</button> 
«/div» 
«script» 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 


) 


function handleButtonPress(e) { 
document.getElementById("imgtarget").src = e.target.id + "100.png"; 





} 
</script> 
</body> 
</html> 


这 个 例子 里 有 一 个 img 元 素 ， 它 的 src 属 性 会 响应 button 点 击 进行 设置 。 不 同 的 按钮 告诉 浏览 
器 向 Web 服 务 器 请 求 不 同 的 图 像 。 这 个 应 用 程序 在 使 用 过 程 中 可 能 会 需要 三 张 图 像 : 
口 bananal100.png; 











口 apple100.png; 





口 cherries100.png。 
其 中 的 一 张 图 像 (bananal100.png ) 会 在 文档 加 载 时 载 人 ， 因 为 它 被 指定 为 img 元 素 src 属 性 的 
初始 值 。 从 图 40-1 可 以 看 到 文档 在 浏览 器 中 的 样子 。 



































| |_| Example | +) 了 
e» | D | http://titan/listings/example.htm X | a. 
| 
x J 














图 40-1 一 个 简单 的 Web 应 用 程序 


我 在 这 一 章 里 使 用 的 是 Firefox 浏 览 器 ， 因 为 它 有 一 种 可 以 轻松 访问 的 离线 模式 (File - Web 
Developer 菜 单 里 有 一 个 选项 )。 我 们 把 浏览 器 切换 到 离线 就 能 模拟 失去 网 络 连 接 的 情况 ( 因此 无 
须 禁 用 我 的 无 线 适 配器 )， 然 后 就 可 以 看 到 我 尝试 修复 的 问题 了 ， 如 图 40-2 所 示 。 

当 我 按 下 Apple 按 钮 时 ， 浏 览 需 会 试图 载 人 图像 apple100.png， 由 于 没有 网 络 连接 ， 请 求 当 然 
就 失败 了 。 但 是 ， 如 果 我 点 击 Banana 按 钮 ,浏览 器 就 会 显示 正确 的 图 像 ， 因 为 banana100.png 自 从 
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文档 首次 载 人 后 就 在 浏 览 器 缓存 中 了 。 我 们 创建 离线 应 用 程序 的 目标 是 : 确保 所 有 需要 的 资源 即 
使 在 离线 状态 下 也 可 用 ， 从 而 让 应 用 程序 能 正常 工作 。 














arj | |_| Example 


Io 3 || L)  http://itan/listings/example.htm - || im s 








m | Apple | Cherries | 




















图 40-2 ”在 离线 时 请 求 不 可 用 的 资源 











40.2 定义 清 s 


清单 (manifest ) 允许 我 们 列 出 离线 工作 所 需 的 全 部 资源 。 代 码 清单 40-2 展 示 了 用 于 示例 Web 
应 用 程序 的 一 份 清单 。 


代码 清单 40-2 一 张 简单 的 清单 


CACHE MANIFEST 
example.html 
banana100. png 
apple100. png 
cherries100.png 


清单 文件 是 一 个 简单 的 文本 文件 。 第 一 行 始终 是 CACHE MANIFEST， 然 后 我 们 再 列 出 应 用 程序 
所 需 的 资源 ， 每 个 文本 行列 一 个 。 


提示 “离线 应 用 程序 的 规范 建议 我 们 把 HTML 文 档 本 身 也 加 入 清单 中 ， 虽 然 当 清单 被 载 入 和 读 
取 时 文档 已 经 在 浏览 器 缓存 里 了 。 








清单 文件 没有 固定 的 命名 方案 ， 但 是 .appcache 是 最 常用 的 。 我 把 例子 里 的 文件 保存 为 
fruit.appcache。 无 论 你 使 用 哪 一 种 命名 方案 ， 都 必须 让 Web 服 务 器 把 里 面 的 内 容 向 浏览 器 描述 为 
MIME 类 型 text/cache-manifest。 


警告 ”如果 服务 器 没有 正确 设置 MIME 类 型 ， 浏 览 器 就 不 会 使 用 缓存 文件 。 




















我 们 通过 html 元 素 的 manifest 属 性 来 关联 文档 与 清单 文件 ， 如 代码 清单 40-3 所 示 。 





40.2 定义 清单 





代码 清单 40-3 ”关联 清单 文件 与 HTML 文档 


«IDOCTYPE HTML» 
«html manifest-"fruit.appcache"» 





«head» 
<title>Example</title> 
<style> 
img (border: medium double black; padding: 5px; margin: 5px; } 
</style> 
</head> 
<body> 
<img id="imgtarget" src="banana100.png"/> 
<div> 
<button id="banana">Banana</button> 
«button id-"apple"»Apple«/button» 
«button id="cherries">Cherries</button> 
</div> 
<script> 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 
} 
function handleButtonPress(e) { 
document.getElementById("imgtarget").src = e.target.id + "100.png"; 
} 
</script> 
</body> 
</html> 




















当 我 们 给 htm]1 元 素 应 用 manifest 属 性 时 ， 浏 览 器 可 能 会 提示 用 户 是 否 允 许 我 们 在 本 地 保存 离 
线 内 容 。 对 此 浏览 器 的 处 理 方法 各 有 不 同 。 Chrome 和 Opera 允 许 我 们 不 提示 用 户 就 缓存 离线 数据 。 





男 一 种 极端 是 Firefox， 它 需要 用 户 的 许可 ， 如 图 40-3 所 示 。 
(Lcd cj 


| JL] imple [+l 








<)> || D) | http/titan/listings/example.htm -alz 











— This website (titan) is asking to store data on 
your computer for offline use. 
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| Banana Jí Apple Jí Cherries | | 


p l x | 区 Eee [Not Now EI 















































图 40-3 “寻求 用 户 批 准 保存 离线 数据 











浏览 需 会 下 载 清 单 里 指定 的 所 有 内 容 , 无 论 现在 是 否 需 要 。 对 我 们 的 简单 应 用 程序 来 说 , 这 




















就 意味 着 所 有 三 个 图 像 都 会 被 下 载 。 现在 应 用 程序 即使 离线 也 能 继续 正常 工作 了 , 如 图 40-4 所 示 。 
如 你 所 见 ， 创 建 一 个 离线 Web 应 用 程序 是 非 党 简单 的 。 我 们 只 需要 创建 清 单 ， 确 保 它 包 全 应， 世 于 
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用 程序 所 需 的 资源 ， 然 后 设置 文档 html 元 素 的 manifest 属 性 值 即 可 。 








| St nnd 
[D tme a E 























[Banana | {Apple | [ Cherries | 
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指定 清单 区 域 

我 们 可 以 给 清单 文件 添加 不 同 的 区 域 。 可 用 的 区 域 共有 三 种 ， 我 会 在 接 下 来 介绍 它们 。 

1. 定义 缓存 区 域 

我 们 可 以 把 需要 缓存 的 文件 列 在 清单 的 开头 部 分 ， 也 可 以 在 文件 里 创建 一 个 CACHE 区 域 。 代 
码 清单 40-4 提 供 了 一 个 例子 。 
代码 清单 40-4 ”定义 清单 文件 的 CACHE 区 域 


CACHE MANIFEST 








example.html 
banana100. png 


CACHE: 
apple100. png 
cherries100.png 


我 把 一 些 资源 放 在 清单 文件 开头 处 的 默认 区 域 里 ， 另 一 些 则 放 在 CACHE 区 域 里 。 这 么 做 的 效 
果 等 同 于 之 前 的 清单 ， 但 它 让 我 们 可 以 在 其 他 区 域 (下 一 节 介 绍 ) 的 后 面 定义 我 们 想 要 的 资源 。 

2. 定义 备用 区 域 

FALLBACK 区 域 允许 我 们 指定 浏览 右 应 当 如 何 处 理 没有 包括 在 清单 内 的 资源 。 代 码 清单 40-5 提 
供 了 一 个 例子 。 


代码 清单 40-5 ”定义 清单 里 的 FALLBACK 区 域 


CACHE MANIFEST 











example.html 
banana100. png 


FALLBACK: 
*.png offline. png 
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CACHE : 
apple100. png 


在 这 个 例子 里 ,我 添加 了 一 个 FALLBACK 区 域 。 这 个 新 的 区 域 包含 了 一 项 内 容 ， 告 诉 浏览 器 如 
果 需 要 未 被 离线 缓存 的 png 文 件 ， 就 应 当 用 offline.png 代 替 。 





提示 “我 们 不 需要 给 清单 里 的 CACHE 区 域 添 加 备用 资源 ， 因 为 浏览 器 会 自动 下 载 备用 资源 。 


我 从 CACHE 区 域 里 移 除了 cherries100.png， 这 样 我 们 就 有 了 一 个 不 可 用 的 应 用 程序 所 需 资源 。 
从 图 40-5 可 以 看 到 浏览 器 是 如 何 处 理 备用 资源 的 。 





























| Banana || Apple {Cherries | 











C 




















图 40-5 ”使 用 备用 内 容 


offline.png 图 像 是 一 个 简单 的 又 。 提 供 备 用 图 像 不 是 理想 的 做 法 ,但 至 少 我 们 可 以 保持 网 页 
结构 和 布局 。 对 于 指向 其 他 文档 的 链接 来 说 ， 备 用 内 容 就 有 用 得 多 了 。 代 码 清 单 40-6 展 示 了 
Web 应 用 程序 文档 中 的 一 处 修改 ， 里 面 添 加 了 指向 男 一 个 HTML 文 件 的 链接 。 


代码 清单 40-6 ”添加 指向 男 一 个 文件 的 链接 


<!DOCTYPE HTML> 
<html manifest="fruit.appcache"> 
<head> 
<title>Example</title> 
<style> 
img (border: medium double black; padding: 5px; margin: 5px; } 
</style> 
</head> 
<body> 
<img id="imgtarget" src="banana100.png"/> 
<div> 
<button id="banana">Banana</button> 
«button id-"apple"»Apple«/button» 
«button id-"cherries"»Cherries«/button» 
«/div» 
«a href="otherpage.html">Link to another page</a> 
«script» 
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var buttons = document.getElementsByTagName("button") ; 

for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 

} 


function handleButtonPress(e) { 
document.getElementById("imgtarget").src = e.target.id + "100.png"; 
} 
</script> 
</body> 
</html> 


然后 我 们 可 以 创建 一 个 备用 文档 , 如 果 链 接 指 向 的 HTML 文 件 不 在 离线 缓存 中 就 可 以 用 它 来 
代替 。 我 把 这 个 网 页 命名 为 offline.html， 代 码 清 单 40-7 展 示 了 它 的 内 容 。 


代码 清单 40-7 ”offline.html 文 档 


<!DOCTYPE HTML> 
<html> 
<head> 
«title»Offline«/title» 
«/head» 
«body» 
«hi»Your browser is offline.</h1> 
Here is some placeholder content 
«/body» 
«/html» 


然后 我 们 就 可 以 给 缓存 清单 文件 添加 一 个 备用 条 目 了 ， 如 代码 清单 40-8 所 示 。 
代码 清单 40-8 ”给 清单 添加 HTML 文 件 的 备用 条 目 


CACHE MANIFEST 














example.html 
banana100. png 


FALLBACK: 
*.png offline.png 
* offline. html 


CACHE: 

app e100.png 

我 用 链接 指向 的 文件 C otherpage.html ) 不 在 清单 内 ， 因 此 它 不 会 被 包括 在 离线 缓存 中 。 如 果 
我 在 离线 状态 点 击 主 文档 里 的 链接 ， 备 用 的 文件 就 会 代替 显示 ， 如 图 40-6 所 示 。( 备用 网 页 里 显 
示 的 消息 不 是 特别 有 帮助 , 但 它 足 以 演示 这 项 功能 。 在 实际 应 用 程序 里 , 我 们 可 以 显示 一 段 更 有 
用 的 消息 ， 甚 至 还 可 以 定义 脚本 ， 用 离线 缓存 中 现 有 的 资源 来 提供 某 种 精简 功能 。) 

3. 定义 网 络 区 域 
清单 文件 里 的 NETNORK 区 域 定 义 了 一 组 不 该 被 缓存 的 资源 ， 浏 览 器 应 该 始终 从 服务 器 请 求 它 
们 ， 甚 至 在 离线 时 也 不 例外 。 代 码 清单 40-9 展 示 了 NETWORK 区 域 的 用 法 。 
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OUT |C omine 








| Your browser is offline. 





| || Here is some placeholder content 



































图 40-6 “使 用 HTML 文档 的 备用 内 容 











代码 清单 40-9 ”定义 清单 里 的 NETWORK 区 域 
CACHE MANIFEST 


example.html 
banana100. png 


FALLBACK: 
* offline. html 


NETWORK: 
cherries100.png 


CACHE : 
apple100. png 


在 这 个 例子 里 ， 我 给 NETNORK 区 域 添加 了 图 像 cherries100.png。 这 就 意味 着 浏览 器 会 尝试 从 服 
务 器 请 求 这 张 图 像 ， 甚至 在 离线 时 也 不 例外 (不 过 如 果 图 像 已 经 在 清单 外 载 信 了， 比如 用 户 在 浏 
览 圳 离线 前 按 下 了 Cherries 按 钮 ， 浏 览 器 就 会 使 用 它 的 缓存 副本 )。 








提示 “在 离线 应 用 程序 里 设置 网 络 区 域 可 能 看 起 来 很 奇怪 ， 但 是 浏览 器 会 使 用 缓存 过 的 数据 ， 
即使 在 线 也 是 如 此 。 


40.3 ”检测 浏览 器 状态 


我 们 可 以 通过 window.navigator.onLine 属 性 判断 浏览 器 是 在 线 还 是 离线 ， 表 40-2 介 绍 了 这 个 


To 




















三 
à 
Loe 








表 40-2 ”onLine 属 性 



































名 称 说 — HB 返 回 
window.navigator.onLine ROR V ae EN Be El false, WRA Vade n AETERNE [n true 布尔 值 CN 
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这 个 属性 只 有 当 浏 览 器 确定 它 为 离线 状态 时 才 是 明确 的 。true 值 并 不 等 于 确认 浏览 器 在 线 ， 
而 是 指 它 不 能 确定 是 否 为 离线 。 代 码 清 单 40-10 展 示 了 这 个 属性 的 用 法 。 


代码 清单 40-10 ”检测 浏览 希 状 态 


<!DOCTYPE HTML> 











<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
The browser is: <span id="status">unknown</span>. 
<script> 
var statusValue; 
if (window.navigator.onLine) { 
statusValue = "online"; 
} else { 
statusValue = "offline"; 
} 
document.getElementById("status").innerHTML = statusValue; 
</script> 
</body> 
</html> 





从 图 40-7 里 看 到 这 两 种 状态 ， 它 们 是 通过 Firefox 方 便 的 离线 模式 实现 的 。 在 现实 中 ， 这 个 状 
态 很 少 如 此 明确 。 浏 览 器 可 以 自由 评估 自己 的 状态 ， 而 大 多 数 浏览 器 不 会 把 离线 当成 默认 状态 ， 


除非 它们 尝试 过 发 起 请 求 然 后 失败 了 ( 另 一 方面 ， 有 些 移动 浏览 器 只 4 要 失去 网 络 覆 盖 就 会 马上 进 
入 离线 模式 )。 
































| | Example 
—— — — O Example 
e >| L] | http//titan/listing LE E 
Be | & y > LJ | http://titan/listings/example.htm ”| we | 
The browser is: online. ——t a" z eee 
| The browser is: offline. 








图 40-7 ”检测 浏览 器 状态 
40.4 ”使 用 离线 缓存 


我 们 可 以 通过 调用 window.applicationCache 属 性 直接 使 用 离线 缓存 ， 它 会 返回 一 个 
ApplicationCache 对 象 。 这 个 对 象 定义 的 成 员 如 表 40-3 所 示 。 























警告 


一 个 高 级 主题 ， 而 且 处 理 缓存 机 制 可 能 会 让 人 感到 十 分 温 直 。 使 用 本 节 介 绍 的 对 象 
和 技巧 前 ， 请 问 问 自己 是 否 真 的 需要 掌控 缓存 。 
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表 40-3 ApplicationCache 对 象 






































名 W 说 明 ig E 
update() 更 新 缓存 以 确保 清单 里 的 项 目 都 已 下 载 了 最 新 的 版 本 void 
swapCache() 交换 当前 缓存 与 较 新 的 缓存 void 
status 返回 缓存 的 状态 数值 




















status 属 性 会 返回 一 个 数值 ， 它 所 对 应 的 集合 如 表 40-4 所 示 。 


表 40-4 ApplicationCache 的 status 属 性 值 






























































值 名 称 说 — Bj 

0 UNCACHED 此 文档 没有 缓存 ， 或 者 缓存 数据 尚未 被 下 载 

1 IDLE 缓存 没有 执行 任何 操作 

2 CHECKING 浏览 器 正在 检查 清单 或 清单 所 指定 项 目的 更 新 

3 DOWNLOADING 浏览 器 正在 下 载 清单 或 内 容 的 更 新 

4 UPDATEREADY 有 更 新 后 的 缓存 数据 可 用 

5 OBSOLETE 缓存 数据 已 废弃 ， 不 应 该 再 使 用 了 。 这 是 请 求 清单 文件 时 返回 HTTP 状 态 码 4xx 所 
造成 的 〈 通常 表明 清单 文件 已 被 移 走 /删除 ) 


























除了 这 些 方法 和 状态 属性 之 外 ，ApplicationCache 对 象 还 定义 了 一 组 事件 ， 它 们 会 在 缓存 状 
态 改 变 时 触发 。 表 40-5 介 绍 了 这 些 事 件 。 


表 40-5 ”ApplicationCache 对 象 定义 的 事件 





















































名 称 说 明 
checking 浏览 器 正在 获取 初始 清单 或 者 检查 清单 更 新 
noupdate 没有 更 新 可 用 ， 当 前 的 清单 是 最 新 版 
downloading 浏览 器 正在 下 载 清单 里 指定 的 内 容 
progress 在 下 载 阶段 中 触发 
cached 清单 里 指定 的 所 有 内 容 都 已 被 下 载 和 缓存 了 
updateready 新 资源 已 下 载 并 且 可 以 使 用 了 
obsolete 缓存 已 废弃 








我 们 可 以 结合 这 些 方法 与 status 属 性 的 值 来 显 式 控制 离线 缓存 ， 如 代码 清单 40-11 所 示 。 
代码 清单 40-11 直接 使 用 应 用 程序 缓存 


<!DOCTYPE HTML> 
<html manifest="fruit.appcache"> 
<head> 
<title>Example</title> 
<style> 
img (border: medium double black; padding: 5px; margin: 5px; } 
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div {margin-top: 10px; margin-bottom: 10px} 
table (margin: 10px; border-collapse: collapse; } 
th, td (padding: 2px; } 
body > * (float: left;} 
«/style» 
«/head» 
«body» 
«div» 
«img id-"imgtarget" src-"banana100.png"/» 
«div» 
«button id="banana">Banana</button> 
«button id-"apple"»Apple«/button» 
«button id-"cherries"»Cherries«/button» 
«/div» 
«div» 
«button id-"update"»Update«/button» 
«button id-"swap"»Swap Cache«/button» 
«/div» 
The status is: «span id="status"></span> 
«/div» 
«table id-"eventtable" border="1"> 
«tr»«th»Event Type«/th»«/tr» 
«/table» 
«script» 
var buttons = document.getElementsByTagName("button") ; 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 
} 








window. applicationCache.onchecking = handleEvent; 
window. applicationCache.onnoupdate = handleEvent; 
window. applicationCache.ondownloading = handleEvent; 
window. applicationCache.onupdateready = handleEvent; 
window. applicationCache.oncached = handleEvent; 
window. applicationCache.onobselete = handleEvent; 


function handleEvent(e) { 
document .gettElementById("eventtable").innerHTML += 
"<tr><td>" + e.type + "</td></td>"; 
checkStatus() ; 


function handleButtonPress(e) { 
switch (e.target.id) { 

case 'swap': 
window.applicationCache.swapCache(); 
break; 

case 'update': 
window.applicationCache.update(); 
checkStatus(); 
break; 

default: 
document.getElementById("imgtarget").src = e.target.id 

* "100.png"; 
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} 
} 


function checkStatus() { 
var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING", 
"UPDATEREADY", "OBSOLETE" ]; 
var status = window.applicationCache. status; 
document.getElementById("status").innerHTML = statusNames[status ]; 
} 


</script> 
</body> 
</html> 


这 个 例子 包含 了 一 些 按钮 ， 它 们 会 调用 ApplicationCache 对 象 的 update 和 swapCache 方 法 。 这 
段 脚 本 还 定义 了 一 个 监听 器 来 监听 某 些 事件 ， 并 在 一 个 table 元 素 里 显示 事件 的 类 型 。 接 下 来 ， 
aie EE 代码 清单 40-12 展 示 了 这 个 例子 所 用 的 清单 。 
代码 清单 40-12 ”缓存 示例 所 用 的 清单 


CACHE MANIFEST 








CACHE : 
example.html 
banana100. png 
cherries100.png 
apple100. png 


FALLBACK: 
* offline.html 


这 份 清单 里 没有 什么 新 东西 ， 它 列 出 了 主 文档 ,用 到 的 图 像 文件 和 一 个 通用 的 备用 文档 。 从 
图 40-8 可 以 看 到 这 个 例子 是 如 何 显示 的 。 














[Banana] (appie ] 
| Update | | Swap Cache [ Update | | Swap Cache | 
The status is: IDLE | The status is: IDLE 


140-8 手动 控制 缓存 




















这 张 图 里 有 一 点 需要 注意 : 事件 的 顺序 。 当 文档 载 人 时 , 浏览 器 检测 到 html 元 素 上 的 manifest 
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属性 ， 于 是 开始 下 载 和 缓存 内 容 。 在 table 元 素 里 可 以 看 到 它 的 效果 : checking. downloadingfll 
cached 事 件 被 触发 了 。 


40.4.1 制作 更 新 


要 引发 缓存 变化 ,我 们 必须 在 服务 器 上 制作 某 种 更 新 。 为 了 把 柠檬 换 成 樱桃 ， 我 将 简单 地 用 
柠檬 图 像 覆 盖 服 务 器 上 的 cherries100.png 文 件 。 这 里 强调 一 下 : 文件 名 仍然 是 cherries100.png, 但 
内 容 已 经 被 换 成 一 个 柠檬 。 

当 我 们 调用 ApplicationCache 对 象 上 的 update 方 法 时 ， 浏 览 需 会 检查 清单 文件 是 否 有 变化 。 但 
是 , 它 不 会 检查 清单 里 指定 的 那些 单独 文件 是 否 已 被 修改 。 因此 , 为 了 让 浏览 器 载 人 修改 过 的 图 像 ， 
还 需要 改动 一 下 清单 文件 。 简 单 起 见 ， 我 改变 了 备用 HTML 文件 的 名 称 ， 如 代码 清单 40-13 所 示 。 


代码 清单 40-13 ”改动 清单 文件 


CACHE MANIFEST 





















































CACHE : 
example.html 
banana100. png 
cherries100.png 
apple100. png 


FALLBACK: 
* offline2.html 


警告 ”调试 离线 缓存 时 造成 混淆 的 一 个 重要 原因 是 浏览 器 会 遵守 清单 文件 里 各 个 条 目的 缓存 策 
略 。 这 就 意味 着 如 果 你 在 不 同类 型 的 内 容 上 设置 了 不 同 的 缓存 过 期 标 头 ， 就 可 能 会 搞 得 
一 团 粮 ， 因 为 浏览 器 只 会 检查 其 中 一 些 的 更 新 ， 另 一 些 则 不 会 。 要 让 缓存 发 生 及 时 的 变 
化 (其 实 是 比较 及 时 ， 参 见 这 一 节 后 面 的 说 明 )， 最 安全 的 做 法 是 设置 Web 服 务 器 ， 让 它 
把 Cache-Control 标 头 设 成 no-cache。 这 会 告诉 浏览 器 每 次 都 要 检查 被 请 求 资源 的 更 新 ( 不 
过 你 不 应 该 在 生产 服务 器 上 这 么 做 )。 


40.4.2 ”获取 更 新 


在 服务 器 上 做 了 改动 之 后 , 我 们 现在 可 以 要 求 浏览 器 更 新 离线 缓存 了 。 要 做 到 这 一 点 ,请 按 
Update (更 新 ) 按钮 。 它 的 效果 如 图 40-9 所 示 。 

新 的 一 列 事件 会 被 展示 出 来 (checking, downloading, updateready )， 绥 存 的 状态 也 会 变 成 
UPDATEREADY。 此 时 ， 浏 览 器 已 经 下 载 了 修改 过 的 内 容 ， 但 它 还 没有 被 应 用 到 我 们 正在 使 用 的 组 
存 中 。 这 就 是 说 ， 即 使 浏览 器 已 经 下 载 并 缓存 了 名 字 相 同 的 柠檬 蔡 代 图 像 ， 点 击 Cherries 按 钮 仍 
然 会 展示 一 张 樱桃 图 片 。 
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The status is: UPDATEREADY 
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图 40-9 下载 更 新 到 离线 缓存 中 
40.4.8 ”应 用 更 新 


当 我 们 准备 好 接收 更 新 内 容 时 ， 就 可 以 按 下 Swap Cache (交换 缓存 ) 按钮 了 。 它 会 调用 
ApplicationCache 对 象 上 的 swapCache 方 法 。 更 新 内 容 就 被 应 用 到 应 用 程序 的 离线 缓存 中 。 








警告 


另 一 个 使 用 缓存 时 造成 混淆 的 原因 是 应 用 更 新 所 产生 的 效果 。 政 动 只 有 在 下 一 次 从 缓存 


请 求 资源 时 才 会 使 用 。 这 就 意味 着 浏览 器 缓存 的 所 有 样式 表 或 脚本 文件 都 不 会 被 重新 加 
载 ， 必 须 显 式 重 载 包含 它 们 的 文档 才能 从 改动 中 获 益 。 


当 我 们 按 下 Cherries 按 钮 后 ， 就 会 看 到 柠檬 的 图 片 ， 如 图 40-10 所 示 。 
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The status is: UPDATEREADY 














图 40-10 ”把 更 新 应 用 到 离线 缓存 中 
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警告 还 有 一 点 让 人 比较 郁闷 的 是 : 应 用 更 新 与 更 新 内 容 被 用 于 文档 之 间 可 能 会 有 延迟 。 在 纺 
写 这 一 章 时 ， 我 遇 到 的 延迟 从 几 秒 钟 到 10 分 钟 不 等 ， 甚 至 更 久 。 
40.5 


小 结 

















本 章 向 你 展示 了 如 何 创建 在 浏览 器 无 法 连接 网 络 时 仍然 能 正常 工作 的 离线 应 用 程序 。 这 实在 
是 一 项 很 有 用 的 功能 ， 
程序 的 缓存 可 





ab BLA 


而 且 当 你 得 到 了 需要 的 配置 之 后 ， 结 果 就 会 很 棒 。 但 是 
能 是 个 让 人 发 狂 的 过 程 
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